「html2canvas」を使ってスクリーンショットを作成、ダウンロードする【使い方】

カテゴリー

JavaScript

Tips

「html2canvas」を使ってスクリーンショットを作成、ダウンロードする【使い方】

16:38・2021/02/09　公開

16:38・2021/02/09　更新

前置き

plotterに使用した「html2canvas」の使い方についての解説です。

公式リファレンスには準拠していないので間違っていたら申し訳ないです、そんなときは公式リファレンスを見て下さい。

html2canvasの公式リファレンス

現在もGitHubで更新がされているようです。

「html2canvas」とは？

JavaScriptHTMLレンダラー
このスクリプトを使用すると、ユーザーのブラウザで直接、Webページまたはその一部の「スクリーンショット」を撮ることができます。スクリーンショットはDOMに基づいているため、実際のスクリーンショットを作成しないため、実際の表現に対して100％正確ではない可能性がありますが、ページで利用可能な情報に基づいてスクリーンショットを作成します。
GitHubのREADMEより引用

どうやら実際にスクリーンショットを撮影しているのではなく、ページのDOMをcanvas要素にJavaScriptで書き起こしているらしい。
つまり、cssによる装飾を一つ一つJavaScriptで解釈し、canvasに描いているようです。

……何を言っているのかわからなくても使えるので次に行きましょう。

「html2canvas」を使ってみる

まずはファイルを読み込む

NPMやYarnでのインストールもできるようですが自分は初心者でさっぱりピーマンなので、右下の「html2canvas.min.js」をダウンロードしました。

左下の「.min」が無いやつは、改行が圧縮されていないファイルです。
html2canvasの中身を観察したい方は左のファイルをダウンロードしたほうがいいと思います。

ダウンロードしたらいつものようにhtmlに読み込みます。

<script src="html2canvas.min.js"></script>

その他の設定

HTMLファイルに、「画像のプレビューを表示するimgタグ」と、「ダウンロードリンクを設定するaタグ」を挿入します。

<img src="" id="result" alt="" />
<!--画像のプレビューを表示するimg-->

<a href="" id="plotter-img" download="html2canvas.png">ダウンロード</a>
<!--ダウンロードリンクを設定するaタグ-->
<!--download属性の値は ダウンロードしたときのファイル名になります-->

↓こっちは.jsファイルの記述。

//画像書き出しの実装

//プレビューを読み込むボタン
const save = document.getElementById('btn-save');

save.addEventListener('click', function () {
    html2canvas(document.getElementById("contentsArea")).then(canvas => {
        var imageData = canvas.toDataURL();
        document.getElementById('result').setAttribute("src", canvas.toDataURL());
        document.getElementById("plotter-img").href = imageData;
    });
});

plotter内の記述を一部ぶっこ抜いてきました。
たったこれだけです。

ここに大雑把な解説を置いておきます。

html2canvas(ここに書き出したい要素を指定する).then(canvas => {
 　　//オプションを記述
　　 var imageData = canvas.toDataURL();
     //↑canvasのURLを生成してimageDataに代入。
     document.getElementById('result').setAttribute("src", canvas.toDataURL());
      //↑imgタグのsrc属性をcanvasのURLにして、プレビューを表示
     document.getElementById("plotter-img").href = imageData;
　　　//↑aタグのリンク先にcanvasのURLを代入して画像のDLを可能にする
});

以上で「html2canvas」を使ってスクリーンショットを作成、ダウンロードできたと思います。

公式リファレンスのオプションを見るともっと色々な設定ができるので、思ったようにいかなかったら確認してみて下さい。