JavaScriptでhtml2canvasを使ってスクリーンショットを撮影しダウンロードする

html2canvasというものを使うことで簡単にスクリーンショットを撮影できるらしい。

というわけでこんな風にして試せるコードをかいてみました。こやつをデベロッパーツールに貼り付けて実行すると、ページ末尾にスクリーンショットのダウンロードボタンが設置され、ダウンロードが試せます。

(function() {

  // html2canvasを読み込む
  let script = document.createElement('script');
  script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js";
  document.body.appendChild(script);

  // html2canvasのロードを待つ
  let loaded = function(cb) {
    if (window.html2canvas === undefined) {
      window.setTimeout(function() {
        loaded();
      }, 100);
    } else {
      cb();
    }
  };

  // html2canvasを使ってスクリーンショットを撮影しダウンロードボタンを設置する
  loaded(function() {
    html2canvas(document.body,{
      onrendered: function(canvas) {
        let a = document.createElement('a');
        a.href = canvas.toDataURL();
        a.download = "hogehoge.png";
        a.innerHTML = "Screenshot Download";
        document.body.appendChild(a);
      }
    });
  });

})();

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA