Webページのスクリーンショット

Question

Vue+Nuxtを利用しているのですが、可能ならばクライアント側のコードで、ボタンを押下したら、そのページのスクリーンショットを取得し、ダウンロードさせたいです。

puppeteerは、サーバ専用だと思うので、他にライブラリなどあれば、ご助言いただけないでしょうか？

よろしくお願いいたします。

Answer 1

使ったことはありませんが、html2canvasはいかがでしょうか。
このライブラリによって生成した画像をaタグのhref属性に指定してあげればお望みの実装ができると思います。

デバッグはしていませんが、上記に紹介したライブラリは以下のような流れで利用できるそうです。

<a href="" id="download" download="hoge.png">

window.onload = function(){
  html2canvas(document.body,{
    onrendered: function(canvas){
      var imgData = canvas.toDataURL();
      document.getElementById("download").href = imgData;
    }
  });
}

Comments

[ss-nantoka]

ありがとうございます。大変助かりました。
実際に試してみて、出来ました。
ただ、ダウンロードした際に画像が空になっていたので、おそらく下記の事象かなと思っています！？

https://ja.stackoverflow.com/questions/18079/html2canvasでキャプチャした画像が空になる