7

CSS を使用して Web ページ上の要素のスタイルを設定し、その要素を静的 png として使用したいと考えています。たとえば、htmlノードを描画することは可能ですか? キャンバスを作成して、そのような画像を透明度とともにファイルに保存しますか?

CSS を使用して既存の HTML を取得し、透過性を維持したまま PNG ファイルにレンダリングする方法を見つけたいと考えています。

4

3 に答える 3

10

HTML要素を画像に保存するには、複雑な回答が必要です。

まず、セキュリティ上の理由から、ブラウザはHTML要素の同じページのイメージングを許可していません。たとえば、銀行のユーザー名とパスワードを含むHTML入力フォームを取得し、それを画像に変換して泥棒に送信する悪意のあるスクリプトを想像してみてください。これは良くありません。

したがって、IEは同じページのHTML要素のイメージングをブロックするだけです-期間。

ChromeとFirefoxには、HTML要素を次のような画像に変換できる機能（バグ？！）がまだある可能性があります。1。「foreignObject」を使用してHTML要素をSVG要素に埋め込みます。2.SVG要素をCanvas要素に描画します。3. canvas.toDataURL（'image / png'）を使用して、png画像を表すエンコードされた文字列を取得します。

HTMLのスタイリングを制御しているように見えるので、PhantomJs.org（phantomjs.org）のような「ヘッドレス」HTMLジェネレーターを使用することで完全な解決策が得られる可能性があります。Phantomjsを使用して、HTML要素を生成およびスタイル設定できます。PhantomJsには、その要素を画像に変換するために使用できるラスタライザーがあります。さらに、必要なスタイル付きHTMLのみを含むWebページを提供できる場合は、この1行のPhantomJsコードでそのページのpngを取得できます。

phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png

Chrome / Firefoxのコードは次の場所にあります：https ：//developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

そしてこのように見えます：

<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
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' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>
于 2013-02-19T18:40:45.417 に答える