Screenshot API of URL/Webpage#

Headless-Render-API has been in business since 2016. No credit card needed. Free tier includes 500 req/month, then it's $9/month for 20,000 req

Take a screenshot of a URL, it's as simple as:

// module/import syntax shown here with async/await
// see the next example for commonjs/require syntax and promises
// npm install prerendercloud
import prerendercloud from "prerendercloud";
import fs from "fs";

(async () => {
  const buf = await prerendercloud.screenshot("https://example.com");
  fs.writeFileSync("out.png", buf, { encoding: null });
})();

See all options in this Node.js snippet and more examples after it:

Node.js Example Usage with all options#

// https://github.com/sanfrancesco/prerendercloud-nodejs#screenshots
// npm install prerendercloud
const prerendercloud = require("prerendercloud");

// set your API key via env var PRERENDER_TOKEN or the following line:
// prerendercloud.set('prerenderToken', 'mySecretToken')

// take screenshot of example.com with default options
prerendercloud
  .screenshot("http://example.com")
  .then((pngBuffer) =>
    fs.writeFileSync("out.png", pngBuffer, { encoding: null })
  );

// take HiDPI/Retina webp screenshot of example.com
// all other options commented out shown for reference
const pngBuffer = await prerendercloud.screenshot("https://example.com/", {
  // deviceWidth: 1366, // Default: 1366
  // deviceHeight: 768, // Default: 768
  // deviceIsMobile: false, // Default: false, whether the meta viewport tag is taken into account
  format: "webp", // Default: png, other options: webp, jpeg

  // use 2 for HiDPI/Retina screenshots
  viewportScale: 2, // Default: 1, min: 0.1, max: 3.0

  // (screen, print, braille, embossed, handheld, projection, speech, tty, tv)
  // emulatedMedia: "screen", // Default: screen, other options: print

  // FOR SCREENSHOT OF A SPECIFIC ELEMENT (e.g. a div with id="open-graph-div")
  // viewportQuerySelector: "#open-graph-div",
  // viewportQuerySelectorPadding: 10,

  // viewportWidth: 800, // Defaults to deviceWidth
  // viewportHeight: 600, // Defaults to deviceHeight
  // viewportX: 0, // Default: 0
  // viewportY: 0, // Default: 0
});

fs.writeFileSync("out.webp", pngBuffer, { encoding: null });

• Screenshot API docs
• endpoint: service.headless-render-api.com/screenshot/$URL
• node.js client on github: https://github.com/sanfrancesco/prerendercloud-nodejs
• node.js npm package: https://www.npmjs.com/package/prerendercloud
• we use headless chromium

See cURL and Node.js examples below, but since it's a simple GET request to a standard HTTP API, you can use any language that can make HTTP requests

cURL Auth#

curl --header "X-Prerender-Token: secret-token

Node.js Auth#

Either use an env var (best practice):

PRERENDER_TOKEN=secret-token node app.js

or hard-code it (typically not a best practice to store secrets in code);

const prerendercloud = require("prerendercloud");
prerendercloud.set("prerenderToken", "mySecretToken");

cURL Examples#

Note: --compressed is a best practice for cURL, it tells cURL to use gzip compression, which is supported by the API (and virtually all HTTP servers)

cURL Website to PNG

curl --compressed \
  https://service.headless-render-api.com/screenshot/https://example.com > out.png

Setting options in cURL via HTTP header

Set screenshot options via HTTP headers, with cURL this would look like:

curl --compressed \
  --header 'Prerender-Emulated-Media: print' \
  https://service.headless-render-api.com/screenshot/https://example.com

Note: http headers are case-insensitive

all Screenshot option headers:

• prerender-device-width
• prerender-device-height
• prerender-device-is-mobile
• prerender-viewport-query-selector
• prerender-viewport-query-selector-padding
• prerender-viewport-width
• prerender-viewport-height
• prerender-viewport-x
• prerender-viewport-y
• prerender-viewport-scale
• prerender-screenshot-format
• prerender-emulated-media
• prerender-wait-extra-long
• prerender-dont-wait-for-web-sockets
• prerender-block-cookies
• origin-header-whitelist
• Go here for full docs on these options