備忘録

備忘録

Webページの特定要素を画像として保存する方法

HTML JavaScript

Ⅰ. はじめに

タイトルの通り「Webページの特定要素を画像として保存する方法」です。

方法

1. サンプルプログラムを書く

index.html

<!DOCTYPE html>
<html>
  <body>
    <button onClick="saveImage()">画像保存</button>

    <div id="test">
      <h1>Hello world!</h1>
      <table>
        <tr><td>a</td><td>b</td></tr>
        <tr><td>c</td><td>d</td></tr>
      </table>
    </div>

    <script>
      function saveImage() {
        // html2canvas(document.body).then(canvas => {
        html2canvas(document.querySelector("#test"), {
          logging: false
        }).then(canvas => { 
          const element = document.createElement('a')
          element.href = canvas.toDataURL()
          element.download = 'out.png'
          element.click()
        })
      }
    </script>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  </body>
</html>

実行結果

out.png
f:id:kagasu:20211213180127p:plain

参考

https://github.com/niklasvh/html2canvas