chrome-screenshot-by-area.js

#!/usr/bin/env node
// npm install -g puppeteer
// export NODE_PATH=$HOME/npm/lib/node_modules:$NODE_PATH
// http://screensiz.es/monitor
// https://pptr.dev/#?product=Puppeteer&version=v1.19.0&show=api-pagescreenshotoptions
// https://pptr.dev/#?product=Puppeteer&version=v1.19.0&show=api-pagesetcookiecookies
// https://github.com/GoogleChrome/puppeteer/issues/1062
// https://github.com/GoogleChrome/puppeteer/issues/669

("use strict");

const help = `Usage Examples:
VIEW_PORT=1920,1080 FULL_PAGE=1 ./chrome-screenshot-by-area.js https://www.baidu.com
VIEW_PORT=1920,1080 FULL_PAGE=1 POST="a=3&b=4" ./chrome-screenshot-by-area.js https://httpbin.org/post
VIEW_PORT=1920,1080 FULL_PAGE=1 POST="@example.json" ./chrome-screenshot-by-area.js https://httpbin.org/post
VIEW_PORT=1920,1080 COOKIES='a=3;b=4' ./chrome-screenshot-by-area.js https://www.baidu.com 100,100 800,600`;

const fs = require("fs");
const puppeteer = require("puppeteer");

const args = process.argv.slice(2);
if (args.length === 0) {
  exit(help);
}
function exit(msg, code) {
  console.error(msg);
  process.exit(code || 1);
}
function parseCookies(text) {
  return text.split(";").map(x => x.split("="));
}
const url = args[0] || exit("missing url");
const out = "screenshot.png";
const fullPage = Boolean(process.env["FULL_PAGE"]);
let viewPort = process.env["VIEW_PORT"] || exit("missing VIEW_PORT");
viewPort = viewPort.split(",").map(x => Number(x));

let leftTop, widthHeight;

if (!fullPage) {
  leftTop = args[1] || exit("missing leftTop");
  widthHeight = args[2] || exit("missing widthHeight");
  leftTop = leftTop.split(",").map(x => Number(x));
  widthHeight = widthHeight.split(",").map(x => Number(x));
  console.log(url, leftTop, widthHeight);
}

const UA =
  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36";

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate({
    viewport: { width: viewPort[0], height: viewPort[1] },
    userAgent: UA
  });
  if (process.env["COOKIES"]) {
    let cookies = parseCookies(process.env["COOKIES"]);
    for (let i in cookies) {
      let c = cookies[i];
      let ck = { name: c[0], value: c[1], url: url };
      console.log("Cookie", ck);
      await page.setCookie(ck);
    }
  }

  // send POST data
  let POST = process.env["POST"];
  if (POST) {
    await page.setRequestInterception(true);
    page.on("request", request => {
      console.log(request.url());
      if (request.url() === url) {
        let ct;
        if (POST[0] === "@") {
          ct =
            process.env["POST_CONTENT_TYPE"] ||
            (POST.indexOf(".json") > 0 ? "application/json" : "application/x-www-form-urlencoded");
          POST = fs.readFileSync(POST.slice(1)).toString("utf8");
        } else {
          ct = process.env["POST_CONTENT_TYPE"] || "application/x-www-form-urlencoded";
        }
        const overrides = {
          method: "POST",
          postData: POST,
          headers: { "Content-Type": ct }
        };
        request.continue(overrides);
        console.log("POST", ct, POST);
      } else {
        request.continue();
      }
    });
  }

  await page.goto(url, { waitUntil: "networkidle0" });
  if (fullPage) {
    await page.screenshot({
      path: out,
      fullPage: true
    });
  } else {
    await page.screenshot({
      path: out,
      clip: {
        x: leftTop[0],
        y: leftTop[1],
        width: widthHeight[0],
        height: widthHeight[1]
      }
    });
  }
  console.log(`Saved as ${out}`);
  await browser.close();
})();