2

Jqueryを使用してHTML Divとそれに関連する要素をキャンバスに変換し、キャンバスを画像に変換する方法はありますか? 私はすでに次のウェブサイトを見ていました.HTMLページ全体を変換して本文にレンダリングするだけです.誰かがそれを見つけるのを手伝ってくれます.

4

2 に答える 2

2

SVG とその .xml を使用して、HTML をキャンバスにレンダリングできますforeignObject。これは、画像や外部ソースをレンダリングできないという制限があります (後でそれらを抽出して個別にレンダリングする必要があります)。

オンラインデモはこちら

結果：

デモ

レンダリングしたい HTML を定義しましょう。

<div id="html">
    <div style="border:2px dotted #f73;font:12px sans-serif">
        <em>This</em> is
        <span style="color:#00f;border:1px solid #777;padding:0 4px">HTML</span>
        drawn into <strong>canvas</strong>
    </div>
</div>

これで、インライン SVG を作成しhtml、最初の div タグの ID を使用してこの html を追加できます。

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
           "<foreignObject width='100%' height='100%'>" +
           "<div xmlns='http://www.w3.org/1999/xhtml'>" + 

           /// extract the html content of div
           document.getElementById('html').innerHTML +

           "</div>" +
           "</foreignObject>" +
           "</svg>";

次のステップは、Blobオブジェクトを作成して、SVG を URL として参照し、画像として描画するキャンバスで使用できるようにすることです。

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"} );

/// create an url that we can use for the image tag
var url = DOMURL.createObjectURL(svg);
img.onload = function () {

    /// now we can draw the "html" to canvas.
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

これを、id とキャンバスを引数として取り、外部コンテンツと画像を処理する関数にラップできます。

于 2013-10-11T07:50:39.910 に答える
0

申し訳ありませんが、ブラウザーは HTML をキャンバスにレンダリングしません。

HTML にはサードパーティ サイトのコンテンツ (特に画像や iframe) が含まれる可能性があるため、可能であれば潜在的なセキュリティ リスクになります。canvasHTML コンテンツを画像に変換して画像データを読み取ることができれば、他のサイトから特権コンテンツを抽出できる可能性があります。

drawImageHTML からキャンバスを取得するには、基本的にandを使用して独自の HTML レンダラーをゼロから作成する必要がありますfillTextが、これは潜在的に巨大な作業です。ここにそのような試みが 1 つありますが、少し危険であり、完全にはほど遠いものです。(HTML/CSS をゼロから解析しようとさえしますが、これはクレイジーだと思います!スタイルが適用された実際の DOM ノードから開始し、et alを使用してスタイリングとそのgetComputedStyle部分の相対位置を読み取る方が簡単です。 offsetTop.)

于 2013-10-11T07:19:20.673 に答える