DOM要素のスクリーンショットを撮る（２）pageres

DOM要素のスクリーンショットを撮る（DOM要素を画像に変換する）には幾つかの方法があるようですが、html2canvasはダメだったので、次にpageresを試してみました。

npm install

npm install pageresします。

コード

DOM要素のスクリーンショットを撮る（１）html2canvasで作成したHTMLドキュメントのスクリーンショットを撮ってみることにしました。

  new pageres({ format: 'jpg' })
    .src('http://localhost:3000/asset/test/test.html', ['1280x1024'], { selector: '.fitch' })
    .dest(__dirname)
    .run();

使ってみる

実際に使ってみます。

DOM要素のスクリーンショットを撮る（１）html2canvasで作成したHTMLドキュメントをブラウザで表示すると下のようになります。

そして、上のコードを実行すると、プログラムが格納されているフォルダにlocalhost!3000!asset!test!test.html-1280x1024.jpgという名称のJPEGファイルが生成されました。

このJPEGファイルは下のようなものでした。

正しくスクリーンショットが撮れていることが分かります！