3

DOM 要素の画像データを取得することは (標準の JS または一部のブラウザー拡張機能によって) 可能ですか?

次のような使い方を考えています。

  • オフスクリーン DOM 要素を作成する
  • CSSスタイルのコンテンツで動的に埋めます
  • 画像データを取得する
  • 何らかの方法で画像データを使用します。
    • 背景として (装飾的な繰り返しテキスト)
    • 箇条書きイメージ (Unicode 箇条書き) として
    • WebGL テクスチャとして (魔法!)
    • ...

これはできますか？このような提案があったことはありますか？

4

3 に答える 3

4

私が考えることができる唯一の方法は、要素を HTML5 キャンバス オブジェクトにレンダリングすることです。これは控えめに言っても難しいです。私が簡単な Google 検索で見つけたそのようなレンダリング エンジンの 1 つは、http ://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/ にあります。

他にも明らかに存在するものは次のとおりです。

srcキャンバスに描画したら、次のメソッドを使用して、画像と css、およびおそらく WebGL テクスチャの属性を設定するために使用できるデータ URL を取得できます。

var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");

また、特に Firefox をターゲットにしている場合は、まさにあなたが望むことを行う独自の機能があります。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

于 2012-04-13T17:48:00.233 に答える
2

http://html2canvas.hertzen.com/を使用してキャンバス上の要素を取得し、次にhttp://www.nihilogic.dk/labs/canvas2image/を使用して「data：」URLに変換します。

于 2012-04-13T17:49:57.040 に答える
1

計画のイメージ生成部分については、dom-to-imageライブラリを参照することをお勧めします。

var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');

domtoimage.toPng(node).then(function (pngDataUrl) {
    parent.removeChild(node);
    for (var i = 0; i < 10; i++) {
        var img = new Image();
        img.src = pngDataUrl;
        parent.appendChild(img);
    }
});

ここにjsfiddleがあります

于 2015-10-02T14:41:14.150 に答える