[Mod] Save screenshot as jpeg and quality is 80 by default.

CHANGELOG.md

@@ -0,0 +1,18 @@
+## Thu Sep 25 2014
+
+> Because of screenshot is png format, it will occupy so much space, so I change it into ``jpeg`` and set quality as ``80`` by default.
+
+* [Mod] save screenshot as ``jpeg`` by default, and quality is ``80``
+* [Add] add options to set screenshot format, quality.
+
+If you want to save screenshot as png format, you can:
+
+
+```javascript
+var Monitor = require('monitor');
+var m = new Monitor('http://www.example.com', {
+    render: {
+        format: 'png'
+    }
+});
+```

index.js

@@ -164,7 +164,10 @@ function mergeSettings(settings){
             }
         },
         render: {
-            delay: 1000 // delay(ms) before screenshot.
+            format: 'jpeg',   // @see http://phantomjs.org/api/webpage/method/render.html
+            quality: 80,      // @see http://phantomjs.org/api/webpage/method/render.html
+            ext: 'jpg',       // the same as format, if not specified
+            delay: 1000       // delay(ms) before screenshot.
         },
         path: {
             root: DEFAULT_DATA_DIRNAME, // data and screenshot save path root

package.json

@@ -1,6 +1,6 @@
 {
     "name": "page-monitor",
-    "version": "0.3.3",
+    "version": "0.4.0",
     "description": "monitor pages and diff the dom change with phantomjs",
     "main": "index.js",
     "scripts": {

phantomjs/index.js

@@ -38,7 +38,7 @@ var TOKEN = _.unique();
 
 // constant values
 var LATEST_LOG_FILENAME = 'latest.log';
-var SCREENSHOT_FILENAME = 'screenshot.png';
+var SCREENSHOT_FILENAME = 'screenshot';
 var INFO_FILENAME = 'info.json';
 var TREE_FILENAME = 'tree.json';
 var HIGHLIGHT_HTML_FILENAME = 'highlight.html';
@@ -221,6 +221,31 @@ M.prototype.getLatestTree = function(){
     return false;
 };
 
+var FORMAT_MAP = {
+    png  : 'png',
+    gif  : 'gif',
+    jpeg : 'jpeg',
+    jpg  : 'jpeg',
+    pdf  : 'pdf'
+};
+
+/**
+ * get render options
+ * @returns {{ext: string, format: 'png'|'gif'|'jpeg'|'pdf', quality: number}}
+ */
+M.prototype.getRenderOptions = function(){
+    var render = this.options.render || {};
+    var f = String(render.format).toLowerCase();
+    var format = FORMAT_MAP[f] || 'png';
+    var quality = render.quality || 80;
+    var ext = (render.ext || f).toLowerCase();
+    return {
+        ext: ext,
+        format: format,
+        quality: quality
+    };
+};
+
 /**
  * save capture
  * @param {webpage} page
@@ -237,8 +262,14 @@ M.prototype.save = function(page, url, tree, time){
     var dir = this.root + '/' + time;
     if(fs.makeDirectory(dir)){
         log('save capture [' + dir + ']');
-        var screenshot = dir + '/' + SCREENSHOT_FILENAME;
-        page.render(screenshot);
+        var opt = this.getRenderOptions();
+        var screenshot = dir + '/' + SCREENSHOT_FILENAME + '.' + opt.ext;
+        log('screenshot [' + screenshot + ']');
+        page.evaluate(function(){
+            var elem = document.documentElement;
+            elem.style.backgroundColor = '#fff';
+        });
+        page.render(screenshot, opt);
         fs.write(dir + '/' + TREE_FILENAME, tree);
         fs.write(dir + '/' + INFO_FILENAME, JSON.stringify({
             time: time,
@@ -266,9 +297,10 @@ M.prototype.save = function(page, url, tree, time){
 M.prototype.highlight = function(left, right, diff, callback){
     log('diff [' + left + '] width [' + right + ']');
     log('has [' + diff.length + '] changes');
-    var lScreenshot = this.root + '/' + left + '/' + SCREENSHOT_FILENAME;
-    var rScreenshot = this.root + '/' + right + '/' + SCREENSHOT_FILENAME;
-    var dScreenshot = this.root + '/diff/' + left + '-' + right + '.png';
+    var render = this.getRenderOptions();
+    var lScreenshot = this.root + '/' + left + '/' + SCREENSHOT_FILENAME + '.' + render.ext;
+    var rScreenshot = this.root + '/' + right + '/' + SCREENSHOT_FILENAME + '.' + render.ext;
+    var dScreenshot = this.root + '/diff/' + left + '-' + right + '.' + render.ext;
     var html = phantom.libraryPath + '/' + HIGHLIGHT_HTML_FILENAME;
     var url = 'file://' + (IS_WIN ? '/' : '') + html + '?';
     var opt = {
@@ -296,7 +328,7 @@ M.prototype.highlight = function(left, right, diff, callback){
             count: page.evaluate(highlight, self.token, diff, options.diff)
         };
         setTimeout(function(){
-            page.render(dScreenshot);
+            page.render(dScreenshot, render);
             callback(info);
         }, 200);
     });