Capture a website screenshot with Node.js.

import { writeFile } from 'node:fs/promises';

const params = new URLSearchParams({
  url: 'https://en.wikipedia.org/wiki/Cartography',
  format: 'webp',
  quality: '80',
  viewport_width: '1280',
  viewport_height: '800',
  device_scale_factor: '2',
});

const response = await fetch(`https://api.urlshot.io/v1/screenshot?${params}`, {
  headers: { Authorization: `Bearer ${process.env.URLSHOT_API_KEY}` },
});

// Anything that is not an image is this envelope, whatever went wrong.
if (!response.ok) {
  const { error } = await response.json();
  throw new Error(`${error.code}: ${error.message} (request ${error.requestId})`);
}

await writeFile('screenshot.webp', Buffer.from(await response.arrayBuffer()));
console.log('Wrote screenshot.webp');

// After the request: what it cost, and how to refer to it.
const credits = response.headers.get('X-Urlshot-Credits-Used'); // '1', or '0' from cache
const requestId = response.headers.get('X-Request-ID');
console.log(`request ${requestId} used ${credits} credit(s)`);

import { writeFile } from 'node:fs/promises';
import { setTimeout as sleep } from 'node:timers/promises';

/** Requests a screenshot, retrying only when the API says how long to wait. */
async function screenshot(params, attempts = 4) {
  for (let attempt = 1; ; attempt++) {
    const response = await fetch(`https://api.urlshot.io/v1/screenshot?${params}`, {
      headers: { Authorization: `Bearer ${process.env.URLSHOT_API_KEY}` },
      signal: AbortSignal.timeout(60_000),
    });
    if (response.ok) return Buffer.from(await response.arrayBuffer());

    // Only a 429 or 503 carries Retry-After, in seconds. Anything else fails
    // the same way however often it is sent.
    const retryAfter = response.headers.get('Retry-After');
    const { error } = await response.json();
    if (retryAfter === null || attempt === attempts) {
      throw new Error(`${error.code}: ${error.message} (request ${error.requestId})`);
    }
    await sleep(Number(retryAfter) * 1000);
  }
}

const params = new URLSearchParams({
  url: 'https://en.wikipedia.org/wiki/Cartography',
  format: 'webp',
});

await writeFile('screenshot.webp', await screenshot(params));
console.log('Wrote screenshot.webp');

import { writeFile } from 'node:fs/promises';

const params = new URLSearchParams({
  url: 'https://en.wikipedia.org/wiki/Atlas',
  full_page: 'true',
  format: 'png',
});

// A list is the parameter repeated, once for each selector.
for (const selector of ['.vector-header-container', '.mw-footer']) {
  params.append('hide_selectors', selector);
}

const response = await fetch(`https://api.urlshot.io/v1/screenshot?${params}`, {
  headers: { Authorization: `Bearer ${process.env.URLSHOT_API_KEY}` },
});

if (!response.ok) {
  const { error } = await response.json();
  throw new Error(`${error.code}: ${error.message} (request ${error.requestId})`);
}

await writeFile('atlas.png', Buffer.from(await response.arrayBuffer()));

import { writeFile } from 'node:fs/promises';

const response = await fetch('https://api.urlshot.io/v1/screenshot', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.URLSHOT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  // JSON types: true rather than 'true', and a list as an array.
  body: JSON.stringify({
    url: 'https://en.wikipedia.org/wiki/Atlas',
    full_page: true,
    format: 'png',
    hide_selectors: ['.vector-header-container', '.mw-footer'],
    custom_css: '#siteNotice { display: none !important }',
  }),
});

if (!response.ok) {
  const { error } = await response.json();
  throw new Error(`${error.code}: ${error.message} (request ${error.requestId})`);
}

await writeFile('atlas.png', Buffer.from(await response.arrayBuffer()));

// npm install express
import express from 'express';

// The pages this app shows previews of. Visitors pick a name, never an
// address: a route that took any URL would render any page on your credits.
const pages = new Map([
  ['home', 'https://example.com'],
  ['atlas', 'https://en.wikipedia.org/wiki/Atlas'],
]);

const app = express();

app.get('/previews/:page', async (req, res) => {
  const url = pages.get(req.params.page);
  if (url === undefined) return res.sendStatus(404);

  const params = new URLSearchParams({
    url,
    viewport_width: '1280',
    format: 'webp',
    cache_ttl: '3600',
  });
  const response = await fetch(`https://api.urlshot.io/v1/screenshot?${params}`, {
    headers: { Authorization: `Bearer ${process.env.URLSHOT_API_KEY}` },
  });

  if (!response.ok) {
    const { error } = await response.json();
    console.error(`${error.code}: ${error.message} (request ${error.requestId})`);
    return res.sendStatus(502);
  }

  res.type(response.headers.get('Content-Type'));
  res.set('Cache-Control', 'public, max-age=3600');
  res.send(Buffer.from(await response.arrayBuffer()));
});

app.listen(3000, () => console.log('Listening on port 3000'));

import { createHmac } from 'node:crypto';

function signedUrl(options) {
  // The key goes in the query alongside the options. Order is yours -- sign the string you are
  // about to send, and send exactly what you signed.
  const query = new URLSearchParams({ key: process.env.URLSHOT_KEY, ...options }).toString();

  const signature = createHmac('sha256', process.env.URLSHOT_SIGNING_SECRET)
    .update(query)
    .digest('hex');

  return `https://api.urlshot.io/v1/screenshot?${query}&signature=${signature}`;
}

// Safe to put in a page: altering any parameter invalidates the signature.
const src = signedUrl({ url: 'https://example.com', viewport_width: '1200' });