【拡張不要】 JS でスクロールするページ全体のスクリーンショットを撮る方法

ネタ記事です。下記記事にインスパイアされています。

• 【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！

JavaScript で Web ページ全体のスクリーンショットを撮る方法を紹介します。目的のサイトを開き、Developer Tool を起動します。Console に下記コードを埋め込むとスクリーンショットが撮れます。簡単ですね！

(() => {
  const src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"
  const sc = document.createElement("script")
  sc.type="text/javascript"
  sc.src=src
  sc.onload = () => {
    html2canvas(document.body, {
      onrendered: (canvas) => {
        const imgageData = canvas.toDataURL("image/png")
        const newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream")
        const element = document.createElement('a')
        element.setAttribute('href', newData)
        element.setAttribute('download', 'screen.png')
        element.style.display = 'none'
        document.body.appendChild(element)
        element.click()
        document.body.removeChild(element)
      }
    })
  }
  document.body.appendChild(sc)
})()

これで PNG ファイルがダウンロードされます。なお、サイトによってはセキュリティポリシーで実行できない場合があります。