みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20211110113212p:plain

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

DEMO

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

ソースコード(抜粋)

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

script.onload = () => {
  document.getElementById('btn-screenshot').addEventListener('click', () => {
    html2canvas(document.body).then(function(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(function(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(function(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);