Puppeteerでbase64形式の画像をダウンロード保存する

環境

• Nodejs 10
• Puppeteer 2.x

やりたいこと

Puppeteerでスクレイピングして画像をダウンロードする際、URLの場合はrequestsモジュール等で適当にダウンロードすればよいが、画像がsrc要素にBase64形式で最初から埋め込まれている場合はそのやり方ができない 。それでDLする方法

サンプル

例えば以下のようなサイトがあったとして

<div>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" id="myimg" />
</div>

以下のようにすると保存できる

const puppeteer = require('puppeteer');
const fs = require('fs').promises;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('xxxxxx');
  await page.waitForSelector('#myimg');
  const str = await page.evaluate('document.querySelector("#myimg").src');
  const buffer = new Buffer(str.replace(/^(data:image\/(jpg|jpeg|png);base64,)/g , ''), 'base64');
  await fs.writeFile('myimg.png', buffer);
  await browser.close();
})();

ポイントは取ってきたsrcのデータをバッファークラスにてBase64のバイナリ化しているところ

これで保存できる