Phantomjs 2

.gitignore

@@ -3,6 +3,7 @@
 .bundle
 .config
 .yardoc
+.idea
 Gemfile.lock
 InstalledFiles
 _yardoc
@@ -15,4 +16,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
-.DS_Store
+.DS_Store

.travis.yml

@@ -3,4 +3,6 @@ rvm:
   - 2.0
   - 2.1
   - 2.2
+before_install:
+  - gem update bundler
 script: "bundle exec rake"

lib/screencap/raster.js

@@ -34,12 +34,23 @@ var page           = new WebPage(),
 // Functions
 //
 function pickupNamedArguments() {
-    var i, pair;
-    for(i = 0; i < phantom.args.length; i++) {
-        pair = phantom.args[i].split(/=(.*)/);
-        args[pair[0]] = pair[1];
+    var pair, scriptArgs;
+    if(typeof phantom.args != 'undefined') {
+        // phantomjs < 2.0
+        scriptArgs = phantom.args;
+    } else {
+        // phantomjs 2.0
+        var system = require('system');
+        scriptArgs = system.args;
+        // remove first arg as always script name
+        scriptArgs.shift();
     }
 
+    scriptArgs.forEach(function(arg, i) {
+        pair = arg.split(/=(.*)/);
+        args[pair[0]] = pair[1];
+    });
+
     if(!args.width)        { args.width = 1024; }
     if(!args.dpi)          { args.dpi = 1; }
     if(args.url)           { args.url = decodeURIComponent(args.url); }
@@ -51,10 +62,10 @@ function pickupNamedArguments() {
 
 function setupMask() {
     // if given settings for an area to take create a mask for that
-    if( args.top && args.left && args.width && args.height) {
+    if(!args.div && args.width && args.height) {
         mask = {
-            top:    args.top,
-            left:   args.left,
+            top:    args.top || 0,
+            left:   args.left || 0,
             width:  args.width,
             height: args.height
         };
@@ -65,16 +76,20 @@ function doRender() {
     clearTimeout(renderTimeout);
     clearTimeout(forcedRenderTimeout);
     clearTimeout(cutoffTimeout);
-    page.render(args.output);
+    if (updateClipping()) {
+        page.render(args.output);
+    } else {
+        console.log('Not rendering as clipping failed, likely due to not finding the div');
+    }
     phantom.exit();
 }
 
 // if the page is taking too long (set via cutoffWait) to load, just exit cleanly
 function cutoff() {
-  clearTimeout(renderTimeout);
-  clearTimeout(forcedRenderTimeout);
-  console.log('Unable to load: ' + args.url + '. Process exceeded cutoff timeout.');
-  phantom.exit();
+    clearTimeout(renderTimeout);
+    clearTimeout(forcedRenderTimeout);
+    console.log('Unable to load: ' + args.url + '. Process exceeded cutoff timeout.');
+    phantom.exit();
 }
 
 function delayScreenshotForResources() {
@@ -94,78 +109,54 @@ function evaluateWithArgs(func) {
 }
 
 function takeScreenshot() {
-  cutoffExecution();
-   page.open(args.url, function(status) {
+    cutoffExecution();
+    page.open(args.url, function(status) {
         if(status !== 'success') {
             console.log('Unable to load: ' + args.url);
             phantom.exit();
         } else {
             delayScreenshotForResources();
-
-            page.includeJs(
-                "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js",
-                function() {
-
-                    var foundDiv = true;
-                    page.evaluate(function(){ jQuery.noConflict(); });
-
-                    if(args.div) {
-                        var clip = evaluateWithArgs(withinPage_GetDivDimensions, args.div);
-                        foundDiv = clip;
-                        page.clipRect = clip;
-                    } else if(mask) {
-                        page.clipRect = mask;
-                    } else if(args.height) {
-                        // have a height resize the html & body to workaround https://github.com/ariya/phantomjs/issues/10619
-                        evaluateWithArgs(
-                            function(w,h) {
-                                jQuery('body, html').css({
-                                    width: w + 'px',
-                                    height: h + 'px',
-                                    overflow: 'hidden'
-                               });
-                            },
-                            page.viewportSize.width,
-                            page.viewportSize.height / args.dpi
-                        );
-                    }
-
-                    if (args.dpi !== 1) {
-                    evaluateWithArgs(
-                        function(dpi) {
-                            document.body.style.webkitTransform = "scale(" + dpi + ")";
-                            document.body.style.webkitTransformOrigin = "0% 0%";
-                            document.body.style.width = (100 / dpi) + "%";
-                        },
-                        args.dpi
-                    );
-                    }
-
-                    if(!foundDiv) {
-                        phantom.exit();
-                    }
-                }
-            );
         }
     });
 }
 
+function updateClipping() {
+    var foundDiv = true;
+
+    if(args.div) {
+        var clip = evaluateWithArgs(withinPage_GetDivDimensions, args.div);
+        foundDiv = !!clip;
+        page.clipRect = clip;
+    } else if(mask) {
+        page.clipRect = mask;
+    }
+
+    if (args.dpi !== 1) {
+        evaluateWithArgs(
+            function(dpi) {
+                document.body.style.webkitTransform = "scale(" + dpi + ")";
+                document.body.style.webkitTransformOrigin = "0% 0%";
+                document.body.style.width = (100 / dpi) + "%";
+            },
+            args.dpi
+        );
+    }
+
+    return foundDiv
+}
+
 //
 // Functions evaluated within the page context
 //
 function withinPage_GetDivDimensions(div){
-    var $el = jQuery(div);
-
-    if($el.length === 0){
+    var el = document.querySelector(div);
+    if(el === null) {
         console.log(div + ' was not found. exiting');
         return false;
     }
 
-    var dims    = $el.offset();
-    dims.height = $el.height();
-    dims.width  = $el.width();
-    return dims;
-}
+    return el.getBoundingClientRect();
+};
 
 //
 // Event handlers
@@ -194,6 +185,11 @@ page.onResourceReceived = function(res) {
             renderTimeout = setTimeout(doRender, resourceWait);
         }
     }
+
+    if(res.url === args.url && res.status !== 200) {
+        console.log('Unable to load: ' + args.url);
+        phantom.exit();
+    }
 };
 
 //

lib/screencap/version.rb

@@ -1,3 +1,3 @@
 module Screencap
-  VERSION = "0.1.4"
+  VERSION = "0.2.1"
 end

spec/fetcher_spec.rb

@@ -6,7 +6,7 @@
   end
 
   it 'supports a custom filename' do
-    screenshot = Screencap::Fetcher.new('http://yahoo.com').fetch(:output => TMP_DIRECTORY + 'custom_filename.png')
+    screenshot = Screencap::Fetcher.new('http://stackoverflow.com').fetch(:output => TMP_DIRECTORY + 'custom_filename.png')
     File.exists?(screenshot).should == true
   end
 
@@ -22,12 +22,13 @@
   end
 
   it 'captures a given element' do
-    screenshot = Screencap::Fetcher.new('http://placehold.it').fetch(:output => TMP_DIRECTORY + 'given_element.jpg', :div => 'img.image')
-    FastImage.size(screenshot)[0].should == 140
+    screenshot = Screencap::Fetcher.new('http://placekitten.com').fetch(:output => TMP_DIRECTORY + 'given_element.jpg', :div => '#image-1')
+    FastImage.size(screenshot)[0].should == 200
+    FastImage.size(screenshot)[1].should == 287
   end
 
   it 'should work when given a query string with ampersand in it' do
     screenshot = Screencap::Fetcher.new('http://google.com?1=2&3=4').fetch(:output => TMP_DIRECTORY + 'ampersand.jpg', :width => 800)
     FastImage.size(screenshot)[0].should == 800
   end
-end
+end

spec/screencap_spec.rb

@@ -8,7 +8,7 @@
 
   it 'throws error when phantom could not load page' do
     expect {
-      Screencap::Fetcher.new('http://doesnotexistatallipromise.com/').fetch(output: TMP_DIRECTORY + 'foo.png')
-    }.to raise_error Screencap::Error, "Could not load URL http://doesnotexistatallipromise.com/"
+      Screencap::Fetcher.new('http://www.google.com/404').fetch(output: TMP_DIRECTORY + 'foo.png')
+    }.to raise_error Screencap::Error, "Could not load URL http://www.google.com/404"
   end
-end
+end