html2canvasの使い方メモ（canvasで出力、画像としてダウンロード）
仕事でhtml2canvasを使う機会があったので使い方をメモしておきます。
目次
- コード
- 動作確認
- 出力したくない要素の指定方法
- IEでの動作不具合について
- 参考リンク
コード
基本的には公式サイトに載っているコードそのままで動作します。
var canvasData = null;
// html2canvas実行
function screenshotHtml(){
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
canvasData = canvas;
}
});
}
// 画像のダウンロード
function downloadImage(canvas)
{
var dataUrl = canvasData.toDataURL("image/png"); // PNG形式
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
a.href = dataUrl;
a.download = "html2canvas動作確認の出力結果イメージ";
a.dispatchEvent(event);
}
動作確認
出力したくない要素の指定方法
出力させたくない要素は属性に「data-html2canvas-ignore="true"」を設定するか、スタイルに「display:none」や「visibility:hidden」を設定します。上記の動作確認では、「data-html2canvas-ignore="true"」を設定しています。
IEでの動作不具合について
IEで「html2canvas」を実行すると、以下のエラーがブラウザのコンソールに出力されて処理が失敗します。
'Promise' は定義されていません。
古いブラウザでは「Promise」がサポートされていないために出力されるエラーです。以下のライブラリを読み込むと実行可能になります。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
なお、ダウンロードはIEでは動作しません。