【JavaScript】HTML要素を画像に変換&ダウンロードさせる方法

プログラミングのKnow-howを共有しましょう

【JavaScript】HTML要素を画像に変換&ダウンロードさせる方法

スポンサーリンク

HTML要素で表現された図形やグラフ、表などを画像としてダウンロードしたい場合に有効な手段を共有します。

HTML要素を画像としてダウンロードする

最終的な完成サンプルは以下の通りです。
Resultタブの下段にあるdownload imageボタンを押すと、画像がダウンロードできます。
【jsFiddle】

上記は以下の手順で実装しています。

  1. HTML要素をcanvasに変換する
  2. canvasを画像としてダウンロードする

それぞれ見ていきましょう。

HTML要素をcanvas要素に変換する

html2canvasライブラリを使用します。

インストール方法はいくつかありますが、ここではheadタグscriptタグを挿入します。

使用方法は以下の通りです。

html2canvas()の引数に変換したいHTML要素を指定します。

  • 子要素を含む全てがcanvas要素に変換される
  • 子要素にcanvas要素が含まれていても変換されずそのまま処理が継続する

canvas要素を画像として出力する

上記でHTML要素をcanvas要素に変換できたので、後は画像として出力するだけです。

ここでは内部でaタグを作成し、クリックイベントを発行させて
画像をダウンロードさせる処理を記述しています。
ポイントは以下の2点です。

  • aタグのhref属性にcanvas画像のダウンロード用URLを設定する
    <canvas要素>.toDataURL()でcanvas画像のURLを作成できます。
    引数にはダウンロード画像の形式を指定します。
  • aタグのdownload属性を指定する
    download属性の指定はURLへの遷移ではなく、ダウンロード処理であることをブラウザに示します。
    属性の値はそのままダウンロードされるファイル名となります。