JavaScriptのhtml2canvasを使ってDIV要素を画像として保存する方法

Webページ上の特定の範囲を画像として保存したい場面は少なくありません。JavaScriptのhtml2canvasライブラリを使えば、HTMLのDIV要素をそのまま画像として保存することができます。

DIVタグとは

DIVタグは、HTMLドキュメント内でひとつの区画（セクション）を定義するための要素です。レイアウトのグループ化やスタイルの適用など、幅広い用途で使用されます。

保存対象となるDIVの例

以下は、id属性に「cpimg」を指定したDIV要素の例です。

<div id="cpimg" style="padding: 20px;">
    <h4>Hello world</h4>
</div>

このコードでは、「cpimg」という名前の区画が定義され、その中に見出しテキストが含まれています。

html2canvasでDIVを画像として保存する

html2canvas関数を使用すると、指定したDIV要素をキャンバス（canvas）として描画し、画像として扱えるようになります。基本的なコードは以下のとおりです。

html2canvas(document.querySelector("#cpimg")).then(canvas => {
    document.body.appendChild(canvas);
});

コードの解説

• document.querySelector("#cpimg")：idが「cpimg」のDIV要素を取得します。
• .then(canvas => {...})：描画が完了した後に生成されたcanvasオブジェクトを受け取ります。
• document.body.appendChild(canvas)：生成されたcanvasをページのbodyに追加して表示します。

この処理により、指定した「cpimg」の区画が画像として保存・表示されます。さらにcanvas.toDataURL()メソッドを組み合わせれば、PNG形式などの画像ファイルとしてダウンロードさせることも可能です。