2017.9.7
2020.1.10

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);
}

動作確認

1行目
2行目(出力しない)
3行目
4行目

上記枠内のHTML要素をhtml2canvasで出力します。

動作確認はこちら

出力したくない要素の指定方法

出力させたくない要素は属性に「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では動作しません。

参考リンク

JavaScript】関連記事