JavaScriptのhtml2canvasを使ってDIV要素を画像として保存・ダウンロードする方法

Webページ上の特定の要素（DIV）をそのまま画像ファイルとして保存できたら便利ですよね。JavaScriptにはhtml2canvas()という関数があり、これを使うことで、HTMLのDIVタグで定義されたセクションを簡単にキャンバス化し、画像として出力できます。

DIVタグは、HTMLドキュメント内の一つの区画（セクション）を定義するための基本要素です。この記事では、実際のコード例を交えながら、DIV要素を画像に変換する手順をわかりやすく解説します。

サンプルコード：対象となるDIV要素

まず、画像として保存したいDIV要素を用意します。以下の例では、「cpimg」というIDを持つDIVを作成しています。

<div id="cpimg" style="padding: 25px;">
   <h4>Welcome</h4>
</div>

このコードでは、cpimgという名前の領域が定義され、その中に「Welcome」という見出しが表示されます。paddingプロパティにより、要素内に適度な余白が設けられています。

html2canvas()でDIVを画像に変換する

次に、html2canvas()関数を使って、このDIV要素を画像として保存します。基本的なコードは以下のとおりです。

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

このコードを実行すると、指定したDIVセクション「cpimg」がキャンバス（canvas）に描画され、その結果がページのbody要素に追加されて画面上に表示されます。

処理の流れ

1. document.querySelector("#cpimg") で、IDが「cpimg」のDIV要素を取得します。
2. html2canvas() がその要素をレンダリングし、Promiseを通じてcanvasオブジェクトを返します。
3. appendChild(canvas) によって、生成されたキャンバスがページ上に表示されます。

画像ファイルとしてダウンロードする方法

生成したキャンバスをPNGなどの拡張子付き画像ファイルとしてダウンロードしたい場合は、toDataURL()メソッドを組み合わせます。

html2canvas(document.querySelector("#cpimg")).then(canvas => {
   const link = document.createElement("a");
   link.href = canvas.toDataURL("image/png");
   link.download = "cpimg.png";
   link.click();
});

このようにすることで、DIV要素の内容が「cpimg.png」という名前の画像ファイルとして保存・ダウンロードされます。

まとめ

• html2canvasライブラリをあらかじめ読み込んでおく必要があります（CDNからも取得可能）。
• querySelectorで対象のDIVを指定し、html2canvas()に渡します。
• 戻り値のcanvasをそのまま表示するか、toDataURL()で画像URLに変換してダウンロードできます。

html2canvasを活用すれば、スクリーンショット機能や帳票の出力など、さまざまな場面でDOM要素を手軽に画像化することが可能になります。