HTMLウェブページをイメージに変える方法?

私のプロジェクトの1つで働いている間、私はHTMLウェブページをイメージに変える特徴を実装しなければなりませんでした.私に起こった最初の考えは、dom-to-imageのような作り付けのライブラリを使用するか、Chrome Headlessを使うか、Puppeteerのようなラッパーライブラリを使うことでした.働いている間、私は純粋なJavaScriptを使ってこのテクニックに遭遇しました.
任意のライブラリを使用せずにこれを達成しようとしましょう.

HTMLウェブページをイメージをキャンバスに変換すること。

セキュリティ上の理由から直接キャンバスにHTMLを描くことはできません.我々は、より安全であるもう一つのアプローチに従います.

ステップ

レンダリングコンテンツを含むSVGイメージを作成します.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
</svg>

HTMLを含むSVGの中に <foreignObject> 要素を挿入します.

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

ノードの中にXHTMLコンテンツを追加します.

<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>em{color:red;}</style>
             Hey there...
        </div>
    </foreignObject>
</svg>

イメージオブジェクトを作成し、イメージのデータURLにイメージのsrcを設定します.

const tempImg = document.createElement('img')
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">Hey there...</div></foreignObject></svg>')

は、この画像をキャンバスに描画し、キャンバスにデータを設定する.

const newImg = document.createElement('img')
newImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">Hey there...</div></foreignObject></svg>')

// add event listener to image.
newImg.addEventListener('load', onNewImageLoad)

// method to draw image to canvas and set data to target img.src

function onNewImageLoad(e){
  ctx.drawImage(e.target, 0, 0)
  targetImg.src = canvas.toDataURL()
}

あなたはCodesandoxで完全なコードを見つけることができます!

SVGとキャンバスを使用する理由は安全ですか？

SVGイメージが同じドメインに現れるものであっても外部リソースをロードするのを許さないので、SVGイメージの実装は非常に制限的です.SVGイメージのスクリプトは許されません、SVGイメージのDOMに他のスクリプトからアクセスする方法が全くありません、そして、SVGイメージのDOM要素は入力イベントを受け取ることができません.したがって、特権制御情報をフォームコントロール(例えば<foreignObject>のフルパスなど)にロードし、それをレンダリングする方法はありません.
スクリプトが直接キャンバスにレンダリングされるDOMノードに触れることができない制限は、セキュリティの観点から重要です.
私はこの話題を簡潔に説明した.このトピックに関連して追加してください.😅
ハッピーラーニング!👩‍💻