Uploading website screenshots to any S3-compatible storage

Using Puppeteer and AWS SDK

Puppeteer

Puppeteer is a perfect library to automate your actions within the browser.

Let’s install it first:

npm i puppeteer

And then take a first screenshot:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({});
    try {
        const page = await browser.newPage();
        await page.goto('https://example.com');

        const blob = await page.screenshot({ encoding: 'binary' });
        // upload image blob to any S3-compatible storage
    } catch (e) {
        console.error(e);
    } finally {
        await browser.close();
    }
})();

In this example, we take a screenshot of the exemplary site and return the binary representation of the image. The last thing is to upload it to Amazon S3 or any S3-compatible storage.

Upload to S3

With aws-sdk, it is fairly easy to do so. Let’s install it first:

npm install aws-sdk

And then we are ready to use it. Let’s for example, upload a screenshot to Cloudflare R2 instead of Amazon S3.

const puppeteer = require('puppeteer');
const S3 = require('aws-sdk/clients/s3');

const accountId = '<account ID>';
const accessKeyId = '<access key ID>';
const accessKeySecret = '<access key secret>';

(async () => {
    const s3 = new S3({
        endpoint: `https://${accountId}.r2.cloudflarestorage.com`,
        accessKeyId: `${accessKeyId}`,
        secretAccessKey: `${accessKeySecret}`,
        signatureVersion: 'v4',
    });

    const browser = await puppeteer.launch({});
    try {
        const page = await browser.newPage();
        await page.goto('https://example.com');

        const blob = await page.screenshot({ encoding: 'binary' });

        const uploadedImage = await s3.upload({
            Bucket: "<bucket name>",
            Key: "example.png",
            Body: blob,
        }).promise();

        const location = uploadedImage.Location;
        console.log(location);
    } catch (e) {
        console.error(e);
    } finally {
        await browser.close();
    }
})();

In this case, we used Cloudflare R2, but for Amazon S3, only the credentials and endpoint might be different. After you upload a screenshot, you receive its URL in the result’s Location attribute. You can return it in the response or do anything you need to do with it.

Using API

One more approach to uploading website screenshots to S3 is to save time and use the ready screenshot API.

ScreenshotOne API already has built-in functionality to upload screenshots to S3. It is scalable, reliable, fast, and uses CDN for storing screenshots.

You only need to configure your S3 access credentials in the dashboard and then specify a parameter in the request query.

Get started for free.

Summary

Decide on which approach suits you best. If you already have all infrastructure ready, have plenty of time, and can afford to build your solution, I would make it. Otherwise, I would use a ready solution to save time and money.

You also might find useful on how to take screenshots with Puppeteer.

Have a nice day 👋