JavaScriptでHTML表示を画像保存する

サイト表示をスナップショットしてSNSにアップする――そんな処理を自動化したくて、まず、HTML表示を部分的に画像にしてファイル保存するスクリプトを作ってみることにした。
通常、ブラウザのレンダリングエンジンを使ってHTML表示をしているので、今回はクライアントサイド（JavaScript）で動作させる。

プログラムを実行する

ダウンロード

圧縮ファイルの内容

html2image.html

サンプル・プログラム本体

  29: <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  30: 

 161: /**
 162:  * 一覧表を画像化する
 163:  * @param   string html  画像化するオブジェクト
 164:  * @return  なし
 165: */
 166: function html2image(html) {
 167:     var capture = document.querySelector(html);
 168:     html2canvas(capture, {useCORS: true}).then(canvas => {
 169:         var base64 = canvas.toDataURL('image/png');
 170: //      $('#image').attr("src", base64);        //画面に画像表示
 171:         $('#download').attr('href', base64);
 172:         $('#download').attr('download', FNAME_SAVE);
 173:         $('#download')[0].click();              //自動ダウンロード
 174:     });
 175: }

HTML表示を画像化するために、html2canvas ライブラリを利用する。このライブラリは Niklas von Hertzen氏によって開発されたもので、ライセンスはMITとなっている。

画像化を実行する関数は html2canvas である。
第一引数に画像化したいオブジェクトを指定する。あらかじめdivタグで画像化したい範囲を定義しておけばいい。
第2引数にレンダリング処理の制御を指定する。
toDataURL には画像形式を指定する。ここではPNG形式で保存することを想定している。BASE64デコードされた画像データを取得できる。
次に、あらかじめ用意した <a id="download"> に画像データ（BASE64）を渡してやる。これにより、変数 html で指定されたオブジェクトがPNG形式画像に自動変換され、<a id="download"> に入る。
最後に、<a id="download"> を自動クリックし、ファイル保存ダイアログを開き、任意の場所に保存する流れとなる。

画像保存するオブジェクトは、「JavaScriptでsprintfを使う」で作った13日の金曜日一覧表である。

• html2canvas
• html2canvasを使ってhtmlサイトを画像化！：ProgLearn
• JavaScriptでsprintfを使う：ぱふぅ家のホームページ