Get and Save Website Images with Puppeteer

At Scarce City, we sell a t-shirt whose main image is the piece of graffiti displayed at Satoshi's Place, an internet graffiti wall powered by Bitcoin Lightning, at the time of purchase. That means that we need to programmatically grab and save the image that is currently on the graffiti wall at that point in time. Since Scarce City runs on node, I chose puppeteer for this job.

With puppeteer, I was able to:

1. Open a headless browser
2. Go to a webpage (in this case Satoshi's Place)
3. Intercept the responses to the requests made by the browser when visiting Satoshi's Place
4. Save the image response with the correct name

At Scarce City, we save the image to Google Cloud Storage but, for this code snippet, we'll save it to the local disk (and tackle the Google Cloud Storage part in another blog post).

import fs from 'fs';
import util from 'util';
// don't forget to npm install this
import puppeteer from 'puppeteer';

// fs.writeFile expects a callback
// I've forgotten the trauma of callbacks and choose to use promises
// util.promisify is a nifty library that "promisifies" old Node functions
const save = util.promisify(fs.writeFile);

async function main() {
  // some standard boiler plate to open a new browser and a page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // intercept responses of the requests made by this page
  page.on('response', async (response) => {
    // if a response is an image whose url has `data:image`
    if (response.request().resourceType() === 'image' && response.url().includes('data:image')) {
      const data = await response.buffer();
      // save the raw data to a local file
      await save('something.bmp', data);
    }
  });

  // go to Satoshi's place and let the event handler above work its magic
  await page.goto('https://satoshis.place', { waitUntil: 'networkidle0' });
  await browser.close();
}

main();

Try this code in your local environment. If you get stuck, feel free to give me a shout on Twitter. Good luck!