↑ 左が撮影元の Element、右がそれを画像化したものです。内容はデザインでよく使われる lorem ipsum と呼ばれるダミーテキストで、意味はありません。

シリーズの記事です。

1. dom-to-imageを試す
2. html2canvasを試す ← 今回の記事
3. 複数の画像を生成してローカルに保存

html2canvas

公式: http://html2canvas.hertzen.com/

驚異的な力技で実装されているようです。

• 動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう - KAYAC engineers' blog

html2canvasは、WebページのDOMやCSSを読み込み、その結果を元に解釈した結果をCanvasエレメント上に描画するライブラリです。 すなわち、実際にスクリーンショットを撮っているわけではなく、挙動としてはレンダリングエンジンに近いです。 （CSSの解釈はなんと1つ1つ実装されているので、作者は本当にすごいと思います）

利用方法

自前でどこかに置かなくても、jsDelivr 経由で参照できます。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>

README のサンプルコードを元に async/await で書き換えます。

(async () => {
  dst.appendChild(await html2canvas(src));
})();

動作結果

この記事の冒頭に貼ったサンプルのスクリーンショットを見ます。

Chrome では上に少し余白ができますが、文字のサイズはそのままで画像化されます。

Firefox では文字のサイズが変わってしまうため、単語間のスペースが潰れたり文字が重なったりします。

撮影対象がブラウザに依存するのでなければ、Chrome で利用するのが無難なようです。

※ 手動ですが Firefox で Element を画像化する方法は前回の記事を参照してください。

参考

以下の記事では CDN にあるバージョンは古いとありますが、jsDelivr では npm に登録されている最新版が利用できます。

• 【2019年度版】JavaScriptでhtmlを画像化する方法(html2canvasの使い方) | ワクベク