16:49・2020/12/03
カテゴリー
JavaScript Tips「html2canvas」を使ってスクリーンショットを作成、ダウンロードする【使い方】
16:38・2021/02/09 公開
16:38・2021/02/09 更新
前置き
plotterに使用した「html2canvas」の使い方についての解説です。
公式リファレンスには準拠していないので間違っていたら申し訳ないです、そんなときは公式リファレンスを見て下さい。
現在もGitHubで更新がされているようです。
「html2canvas」とは?
JavaScriptHTMLレンダラー
GitHubのREADMEより引用
このスクリプトを使用すると、ユーザーのブラウザで直接、Webページまたはその一部の「スクリーンショット」を撮ることができます。スクリーンショットはDOMに基づいているため、実際のスクリーンショットを作成しないため、実際の表現に対して100%正確ではない可能性がありますが、ページで利用可能な情報に基づいてスクリーンショットを作成します。
どうやら実際にスクリーンショットを撮影しているのではなく、ページの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」を使ってスクリーンショットを作成、ダウンロードできたと思います。
公式リファレンスのオプションを見るともっと色々な設定ができるので、思ったようにいかなかったら確認してみて下さい。
参考にしたサイト
【2019年度版】JavaScriptでhtmlを画像化する方法(html2canvasの使い方) | カニチル
ほぼ同じ内容がこの記事にもあります。自分のでダメだったらこちらを確認してみて下さい。
動的コンテンツを画像化できるJSライブラリ “html2canvas” を使おう – KAYAC engineers’ blog
html2canvasのより詳しい解説が載っています。
たった8行!キャンバスをワンクリックで保存させるJavaScriptコード(IEも大丈夫) – console dot log
ブックマークに残っていたので一応紹介しておきます。IEに対応させたい場合は読んでみて下さい。