Use sharp to convert screenshots

Dockerfile

@@ -12,7 +12,9 @@ COPY docker/webpagereplay/wpr_key.pem /webpagereplay/certs/
 COPY docker/webpagereplay/deterministic.js /webpagereplay/scripts/deterministic.js
 COPY docker/webpagereplay/LICENSE /webpagereplay/
 
+# build-essential is needed for Sharp to compile
 RUN sudo apt-get update && sudo apt-get install libnss3-tools \
+  build-essential \  
   iproute2 -y && \
   mkdir -p $HOME/.pki/nssdb && \
   certutil -d $HOME/.pki/nssdb -N

lib/core/engine/collector.js

@@ -1,6 +1,7 @@
 'use strict';
 const forEach = require('lodash.foreach');
 const chromeCPU = require('../../support/chromeCPU');
+const ScreenshotManager = require('../../screenshot/');
 
 /**
  * Create a new Collector instance. The collector will collect metrics
@@ -12,6 +13,7 @@ class Collector {
     this.options = options;
     this.statistics = statistics;
     this.storageManager = storageManager;
+    this.screenshotManager = new ScreenshotManager(storageManager, options);
     this.collectChromeTimeline =
       options.chrome &&
       options.chrome.collectTracingEvents &&
@@ -57,12 +59,7 @@ class Collector {
     // and array and the promise them all later on
     const extraWork = [];
     if (this.options.screenshot) {
-      extraWork.push(
-        this.storageManager.writeData(
-          `screenshot-${index}.png`,
-          data.screenshot
-        )
-      );
+      extraWork.push(this.screenshotManager.save(`${index}`, data.screenshot));
     }
 
     // Collect CPU data. There are some extra work going on here now

lib/screenshot/defaults.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  type: 'jpg',
+  png: {
+    compressionLevel: 6
+  },
+  jpg: {
+    quality: 80
+  },
+  maxSize: 2000
+};

lib/screenshot/index.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const sharp = require('sharp');
+const merge = require('lodash.merge');
+const defaultConfig = require('./defaults');
+
+const SCREENSHOT_DIR = 'screenshot';
+
+function savePng(name, data, storageManager, config) {
+  return sharp(data)
+    .png({ compressionLevel: config.png.compressionLevel })
+    .resize(config.maxSize, config.maxSize)
+    .max()
+    .toBuffer()
+    .then(newBuff =>
+      storageManager.writeData(`${name}.png`, newBuff, SCREENSHOT_DIR)
+    );
+}
+
+function saveJpg(name, data, storageManager, config) {
+  return sharp(data)
+    .jpeg({ quality: config.jpg.quality })
+    .resize(config.maxSize, config.maxSize)
+    .max()
+    .toBuffer()
+    .then(newBuff =>
+      storageManager.writeData(`${name}.jpg`, newBuff, SCREENSHOT_DIR)
+    );
+}
+
+class ScreenshotManager {
+  constructor(storageManager, options) {
+    this.storageManager = storageManager;
+    this.config = merge({}, defaultConfig, options.screenshotParams);
+  }
+
+  save(name, data) {
+    if (this.config.type === 'png') {
+      return savePng(name, data, this.storageManager, this.config);
+    } else {
+      return saveJpg(name, data, this.storageManager, this.config);
+    }
+  }
+}
+
+module.exports = ScreenshotManager;

lib/support/cli.js

@@ -5,6 +5,7 @@ const urlValidator = require('valid-url');
 const util = require('util');
 const hasbin = require('hasbin');
 const videoDefaults = require('../video/defaults');
+const screenshotDefaults = require('../screenshot/defaults');
 
 function validateInput(argv) {
   let url = argv._[0];
@@ -290,9 +291,33 @@ module.exports.parseCommandLine = function parseCommandLine() {
       choices: ['chrome', 'firefox'],
       describe: 'Specify browser'
     })
+    /** Screenshot */
     .option('screenshot', {
       type: 'boolean',
-      describe: 'Save one screen shot per iteration.'
+      default: false,
+      describe: 'Save one screen shot per iteration.',
+      group: 'Screenshot'
+    })
+    .option('screenshotParams.type', {
+      describe: 'Set the file type of the screenshot',
+      choices: ['png', 'jpg'],
+      default: screenshotDefaults.type,
+      group: 'Screenshot'
+    })
+    .option('screenshotParams.png.compressionLevel', {
+      describe: 'zlib compression level',
+      default: screenshotDefaults.png.compressionLevel,
+      group: 'Screenshot'
+    })
+    .option('screenshotParams.jpg.quality', {
+      describe: 'Quality of the JPEG screenshot. 1-100',
+      default: screenshotDefaults.jpg.quality,
+      group: 'Screenshot'
+    })
+    .option('screenshotParams.maxSize', {
+      describe: 'The max size of the screenshot (width and height).',
+      default: screenshotDefaults.maxSize,
+      group: 'Screenshot'
     })
     .option('pageCompleteCheck', {
       describe:

lib/support/storageManager.js

@@ -53,9 +53,9 @@ class StorageManager {
     return mkdirp(dir).then(() => dir);
   }
 
-  writeData(filename, data) {
+  writeData(filename, data, subdir) {
     return Promise.join(
-      this.createDataDir(),
+      subdir ? this.createSubDataDir(subdir) : this.createDataDir(),
       filename,
       data,
       (dirPath, filename, data) =>