html2canvasでページのスクリーンショットを撮る 📸

html2canvasを使ってHTMLの画像化を試みました。

DEMO

screenshot

👆 このボタンを押すとスクリーンショットを撮影し、画像をダウンロードします。

ソースコード（抜粋）

const script = document.createElement('script');

script.onload = () => {
  document.getElementById('btn-screenshot').addEventListener('click', () => {
    html2canvas(document.body).then((canvas) => { // ❷
      // ❸
    });
  });
};

script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
document.body.appendChild(script); // ❶

html2canvasの使い方は非常に簡単で、

❶ ソースを読み込む
❷ window.html2canvasを実行するとPromiseが返ってくる
❸ HTMLをレンダリングしたcanvasが引数で渡ってくる

という流れです。

ここに前回つくった、ファイルをダウンロードするスクリプトを併せ、

html2canvas(document.body).then((canvas) => {
  downloadImage(canvas.toDataURL());
});

と言う感じで、base64を渡すことでスクリーンショットのダウンロードを実現しました。

blog.kimizuka.org

ソースコード（全文）

const script = document.createElement('script');

script.onload = () => {
  document.getElementById('btn-screenshot').addEventListener('click', () => {
    html2canvas(document.body).then((canvas) => {
      downloadImage(canvas.toDataURL());
    });
  });

  function downloadImage(dataUrl) {
    const name = 'screenshot.png';
    const a = document.createElement('a');

    a.href = dataUrl;
    a.download = name;
    a.click();
  }
};

script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
document.body.appendChild(script);