Added viewportWidth= and viewportHeight=, closes simonw#4

Also documented other options.

Author: simonw

README.md

@@ -15,3 +15,11 @@ You can access screenshots for pages using:
     https:/.../zeit.co/blog?type=png&key=...
 
 Screenshots can take several seconds to generate so it's a good idea to cache them somewhere.
+
+## Querystring arguments
+
+- `?viewportWidth=` sets the browser viewport width in pixels. This defaults to 800.
+- `?viewportHeight=` sets the browser viewport height in pixels. This defaults to 600.
+- `?type=` set the output type to `png` or `jpeg`. Default is `png`.
+- `?quality=75` set the JPEG output qualit. Ignored for PNG.
+- `?fullPage=true` fetch a screenshot of the full page, not just the browser viewport.

chromium.js

@@ -1,11 +1,15 @@
 const chrome = require('chrome-aws-lambda');
 const puppeteer = require('puppeteer-core');
 
-async function getScreenshot(url, type, quality, fullPage) {
+async function getScreenshot(url, type, quality, fullPage, viewportWidth, viewportHeight) {
     const browser = await puppeteer.launch({
         args: chrome.args,
         executablePath: await chrome.executablePath,
         headless: chrome.headless,
+        defaultViewport: {
+            width: viewportWidth,
+            height: viewportHeight
+        }
     });
 
     const page = await browser.newPage();

screenshot.js

@@ -25,12 +25,14 @@ module.exports = async function (req, res) {
         const { type = 'png', quality, fullPage } = query;
         const url = getUrlFromPath(pathname);
         const qual = getInt(quality);
+        let viewportWidth = parseInt(req.query.viewportWidth || '800');
+        let viewportHeight = parseInt(req.query.viewportHeight || '600');
         if (!isValidUrl(url)) {
             res.statusCode = 400;
             res.setHeader('Content-Type', 'text/html');
             res.end(`<h1>Bad Request</h1><p>The url <em>${url}</em> is not valid.</p>`);
         } else {
-            const file = await getScreenshot(url, type, qual, fullPage);
+            const file = await getScreenshot(url, type, qual, fullPage, viewportWidth, viewportHeight);
             res.statusCode = 200;
             res.setHeader('Content-Type', `image/${type}`);
             res.end(file);