brenden/node-webshot

Easy website screenshots in Node.js

node-webshot's Issues

Webshot takes picture of ad only on nytimes.com

Here is what I see when I go to nytimes.com in my browser:

Here is what I see when I look at the screenshot webshot module takes of nytimes.com

Why is this happening, and can I fix this somehow?

Support siteType "file"

Would be nice if the phantomjs instance could read html from a local file.

Either directly or by first using the file api and then handle similar to the existing html string option (if needed for security).

I hacked something for this in my grunt wrapper (it transforms it into siteType:html) but then I get #39 on large files.

Is there any support for swf?

I know this is a phantomjs question but this project seems a good place to ask. Has anyone run flash with webshot, specifically non-video movies?

shotSize 'all' option not working

We managed to work around this by commenting out the width/height options in the clipRect part of the phantom script.

Update documentation to mention you need imagemagick installed to run the tests

I just got caught out.

Node 0.10.2 gives error "Error: spawn ENOENT" when running the tests and imagemagick isn't installed on your system. Of course this is a little cryptic. It wasn't until I downgraded to 0.8.15 and got a different error message did I know what was going on.

FYI the error message in 0.8.15 was "Error: Command failed: execvp(): No such file or directory".

Missing zoomFactor

It would be nice to support Phantom zoomFactor.

write image to browser/client

Hi,

Question;
I am not very familiar with node yet. Could you please provide me with an example of how to direct the output to an image that is send to the browser and not stored on disk/server?

Thanks in advance!

Webshot from URL on Heroku not working

Hello, I've tried with no success to get webshot to work on Heroku. Oddly, it works fine locally and when running foreman start (which should emulate Heroku.) Here are some more details:

• Works fine running foreman
• Tried a number or different output methods, ie: streaming, writing to file, DL the file.
• On Heroku, sometimes webshot fails, and I get an error. Other times it appears to work fine... but no image is saved.
• I've tried pointing to multiple URLs which all fail on Heroku.

I've used a few variations of your examples and code I've found online. I can post code samples here if needed, but maybe you have more insight into Heroku?

I've seen mention online to a custom buildpack, is this needed?

Thanks,
-Matt

Blank image returned

test: http://www.microsoft.com

Blank dropdown shown in many webshots near the top of image

There is a blank dropdown shown in many webshots near the top of the image.

Using port number

hello, i have an internal website which runs on port X, and when you include the :port in the link it fails to create the file,

 webshot('http://XXXX:9876', 'control.png', function(err) {

// screenshot now saved to control.png
});

if i use the address without the port number it works fine.

Thank you

Regards

Generate pdf while streaming

For some reason I haven't been able to generate a pdf while streaming the output.

These are the options I'm using:

var options = {
      streamType: 'png',
      paperSize: {
         format: 'A4'
       , orientation: 'portrait'
       }
  };

and this is the code I use to stream the result using express

res.setHeader("content-type", "application/pdf");

  webshot(req.body.url, options, function(err, renderStream) {
    if (err) {
        console.log(err);
        return res.end();

    }
    // console.log(renderStream);

    // renderStream.pipe(res);

    renderStream.on('data', function(data) {

        res.write(data.toString('binary'), 'binary');
        // console.log('something');

    });

    renderStream.on('end', function() {
        console.log('Ready with streaming');
        res.end();

    });


  });

The pdf is being rendered fine if the result is written to a file directly by webshot.

Great API. only generated pdf has blank page always

It is really a great API. I tested images and pdfs output and all work. but just one small issue, generated images are always correct but pdf always has blank white area on the bottom and it occupy half or one page. I tried option to resize but it doesn't fix it. Thank you.

Is there a way to wait for AngularJS to finish loading?

I'm running webshot to capture a screenshot of our application on a cronjob. Then I transform it with ImageMagick. The issue is I have set the renderDelay up to 10000 and my app is still not fully loaded. Is there a way to wait for all http requests to finish?

var options = {
        windowSize: {
            width: 1100, 
            height: 800
        }, 
        shotSize: {
            width: 'window', 
            height: 'window'
        },
        renderDelay: 0,
        userAgent: 'Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36'
    };

It can't generate image if pass a specify url

It can't generate image if I pass a specify url "http://max.oos.tw/?p=179" but it generate image successfully when I use PhantomJS command line tool.

I use webshot to implement a web service. I got a bad file when I want to generate image using url "http://max.oos.tw/?p=179"

Timeout has no effect when using webshot to output to a stream

timeout option does not work, as there is a check for 'path' variable.

I think it should still be possible to kill the process if nothing has been written to the pipe within a timeout period.

I'll take a look at making a merge request when I get time, for now I just hacked around it in my own code, badly.

Great project though, +1

Incorrect 'this' reference in stream mode

Hi, I have an error and believe that "this" reference is incorrect in stream mode this.kill(); Having the following error when webshot is failing in stream mode due to PhantomJS crash:

TypeError: Object # has no method 'kill'

phantomProc.stderr.on('data', function(data) {
      clearTimeout(timeoutID);
      cb(new Error(data));
      this.kill();
    });

    phantomProc.on('exit', function() {
      s.emit('end');
      this.kill();
    });

Unhandled 'error' event

var webshot = require('webshot');
var fs      = require('fs');

webshot('google.com', function(err, renderStream) {
    var file = fs.createWriteStream('google.png', {encoding: 'binary'});

    renderStream.on('data', function(data) {
        file.write(data.toString('binary'), 'binary');
    });
});

error:

events.js:77
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at exports._errnoException (util.js:676:11)
at Process.ChildProcess._handle.onexit (child_process.js:772:32)

Fail to take the screenshot with some url

I have this code

webshot url, (err, stream) ->
gm(stream, filename + extension).write directory + filename + extension, (err) ->
    if err
        console.log 'err:', err
    else
        console.log 'success'

It's works!, but with some url, just not render de image,
The url for test: https://medium.com/@moon_beamed/on-going-viral-62a3e71ddac4
i'm get

{ [Error: Command failed: gm convert: Improper image header (/var/folders/qp/g6h_g57n7m51l2qb_np957kh0000gn/T/gmfXs0zO).] code: 1, signal: null }

if i don't use gm

webshot url, directory + filename + extension, (err)  ->
if !err
    console.log 'saved'
else
    console.log 'err:', err

i get

err: [Error: PhantomJS exited with return value 1]

Won't work on Windows 7

Is windows supposed to be supported ?

I have a sample code that works on Linux, but not on windows.

I even tried to path.resolve the file path, still not working.

No error message is in the console. The callback never gets called.

Doesn't use css @media.

Hi, the API works perfectly. but i'm missing a feature that phantomjs uses normally, its css' @media.

I'm willing to print invoices and i've defined special css styles, but when I use webshot it prints the browser view.

Is there a way of doing it?

Thank you!

Not compatible with React.js code

webshot is not working with any site build in https://github.com/facebook/react/

Simple html test page if you want to try:

<!DOCTYPE html>
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Integrate with resize and crop lib

Example - https://github.com/madhums/node-imager
Create options "thumbnail" and "thumbnailCrop" with params width, height and crop(true/false) for resize and/or crop image.

Multiple screenshots from same request?

Hi,

I'd like to take a screenshot of a site's current state, then inject some js, and take another screenshot.

Is that possible with node-webshot?

I could do two calls to webshot, but that would also mean two requests (?), in which case the page might not look the same (different ads etc.).

Support for page headers

Would be great if we had an option to add the customHeaders that PhantomJS has but inside Webshot.
Ideally it would sit in the options in a similar fashion to cookies.

Thanks

Better error message when PhantomJS fails

sindresorhus/pageres#8 (comment)

Images missing when using "file" fileType

When using the value "file" for the "fileType" parameter, the generated screenshot does not include the images contained in the HTML file (I've tried with local image files and hosted images but none worked).
However, the same HTML works fine when it's hosted.

streaming not working (possibly a documentation issue)

the documentation states that for a streaming context two parameters have to be submitted:

webshot('google.com', function(err, renderStream) {
    //do something with the renderstream
});

when doing this only an empty file is created. (therefore the unittest for streaming isn't helping as it is only tested if the file exists but not if there's actual filecontent)

the responsible part of the code (https://github.com/brenden/node-webshot/blob/master/lib/webshot.js#L51):

the first argument is the url of the site, the last (and thus second) is the callback.

  var args = Array.prototype.slice.call(arguments, 0);
  var cb = args.pop();
  var site = args.shift();
  ....
  var streaming = false;

  switch (args.length) {
    case 1:
      var arg = args.pop();

      if (toString.call(arg) === '[object String]') {
        path = arg;
      } else {
        options = arg;
        streaming = true;
      }
  ...

that results of course in streaming getting never set to true as args has the length of 0.

Need to wait for webpage's JavaScript to update webpage content

Try with http://contraponto.com.pt

Unhandled 'error' event + exit!

Firstly - Thanks for contributing this library. I'm having an odd issue though - exclusive to one rather large bit of HTML5 markup.

If I pass this in as an HTML string w/ siteType: 'html' - it dies. If I use a URL to the same content - no issue.

source: http://projects.postclick.net/~jbair/phantom-test.html

Node.js 10.5
└─┬ [email protected]
  └─┬ [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├─┬ [email protected]
    │ ├─┬ [email protected]
    │ │ └── [email protected]
    │ ├── [email protected]
    │ ├── [email protected]
    │ ├─┬ [email protected]
    │ │ └── [email protected]
    │ ├── [email protected]
    │ ├── [email protected]
    │ └── [email protected]
    └─┬ [email protected]
      └── [email protected]

grunt wrapper for webshot

I'm open for suggestions or collaboration:

https://npmjs.org/package/grunt-webshot

Thanks for the webshot module 👍

Passing variables to options.script

Is it possible to pass variables to the options.script method? I'm pretty sure it's not because it's using eval(), but it would be a nice feature.

var a = 'Title';
var b = 'Subtitle';

var opts = {
  script: function(){
    var div = document.createElement('DIV');
    div.innerHTML = '<h1>'+ a +'</h1><h2>' + b + '</h2>';
  }
}

Add option to apply cookies

Bad argument

Hi !

Am I the only one who have a error with webshot ?

Here the stacktrace with node v0.10.24 :

TypeError: Bad argument
at ChildProcess.spawn (child_process.js:915:24)
at Object.exports.spawn (child_process.js:715:9)
at spawnPhantom (/project/node_modules/webshot/lib/webshot.js:215:34)
at spawn (/project/node_modules/webshot/lib/webshot.js:123:7)
at /project/node_modules/webshot/lib/webshot.js:135:9
at Object.cb as oncomplete

Thx in advance for any help !

Return base64 image returns half image

Hey im trying to return a base64 image but im finding it hard, when i write the file to disk its fine. when i return base64 it returns half an image.

var options = {
screenSize: {
width: 1280
, height: 768
}
, streamType: 'png'
, shotSize: {
width: 1280
, height: 768
}
}

webshot(url, options,function(err, renderStream) {

renderStream.on('data', function(data) {

res.send(data.toString('binary'));

});

});

returns a valid base64 just a tiny portion of the screen. Really weird.

any ideas?

Portrait and landscape feature

Can webshot be extended to include taking snapshots in landscape orientation, This is not an issue but a nice to have feature.

Depend on phantomjs module so not have to install phantom separately

https://npmjs.org/package/phantomjs

Capturing on client-side

Thanks for the great work put into this,

I need to be able to allow my users to implicitly (By pressing a button on client-side) to take a screenshot of the page they are working with. This screenshot is to be sent as a png to the server-side and stored in database.
Is this something that I can be achieved with this module? would you please guide me as how I can capture users page on client-side?

Thanks
Amir

Error on large html

I get this scary error then using long html strings:

Fatal error: spawn ENAMETOOLONG�
Error: spawn ENAMETOOLONG
    at errnoException (child_process.js:980:11)
    at Process.ChildProcess._handle.onexit (child_process.js:771:34)� Use --force to continue.

    Aborted due to warnings.

Webshot/child_process can't create the Phantom process when phantomConfig is used

My config contains this:

phantomConfig: {
  'ignore-ssl-errors': 'true'
},

When I run node path/to/node/ThumbnailWorker.js, this error is thrown:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: spawn ENOENT
    at errnoException (child_process.js:1001:11)
    at Process.ChildProcess._handle.onexit (child_process.js:792:34)

The command that Webshot is trying to run through child_process.spawn is this:

/home/our-user/project/node_modules/phantomjs/lib/phantom/bin/phantomjs "--ignore-ssl-errors=true" "/home/our-user/project/node_modules/webshot/lib/webshot.phantom.js" "https://api.our-website.com/preview-for-gearman-screenshoter/xxxxx" "null" "true" "{\"windowSize\":{\"width\":1200,\"height\":1550},\"shotSize\":{\"width\":\"window\",\"height\":\"window\"},\"shotOffset\":{\"left\":0,\"right\":0,\"top\":0,\"bottom\":0},\"defaultWhiteBackground\":true,\"streamType\":\"png\",\"siteType\":\"url\",\"quality\":75,\"errorIfStatusIsNot200\":true,\"settings\":{\"resourceTimeout\":5000}}"

That command ran manually in the terminal correctly prints out the image data.

I've tried changing Webshot to use child_process.exec, running as sudo, and lots of other things, but I can't get this to run. :( It runs fine without phantomConfig.

Any ideas?

Add support for proxy

Hey there!

Proxy support seems to be missing from the library. Do you plan on adding it?
It would be interesting for cache proxies and the likes, to avoid overusing bandwidth when doing multiple page screenshots.

Thanks!

Return stream instance synchronously

In the documentation, this is declared:

var webshot = require('webshot');
var fs      = require('fs');

webshot('google.com', function(err, renderStream) {
  var file = fs.createWriteStream('google.png', {encoding: 'binary'});

  renderStream.on('data', function(data) {
    file.write(data.toString('binary'), 'binary');
  });
});

The stream instance is returned asynchronously. Why is this? Should the code not look like this?

var webshot = require('webshot');
var fs      = require('fs');
var file = fs.createWriteStream('google.png', {encoding: 'binary'});

var renderStream = webshot('google.com');
renderStream.pipe(file);

document.cookie not filled out by webshot cookie option

If I use the following JS and call directly using phatomJS

var webPage = require('webpage');
var page = webPage.create();

phantom.addCookie({
   "name": "test",
   "value": "no value",
   "domain": "localhost"
});

page.open('http://localhost/web/status.html', function() {

    page.render('test.png');
    phantom.exit();
});

Then have a local web server that changes the web/status.html page to simply show the contents of document.cookie my screen shot will show my test cookie.

If however instead I use webshot to handle the cross process comunication from inside my node app I can't set the cookie (the screen shot always shows a value of '""' for document.cookie).

node file (test.js) is as such

var options = {
    defaultWhiteBackground: true,
    cookies = [{
       "name": "test",
       "value": "no value",
       "domain": "localhost"
    }]
};

webshot('http://localhost/web/status.html','test.png', options, function(err) {
    // screenshot now saved to outFile iff err==null
});

The documentation implies the cookies object gets passed to phantomJS and to use an array. I tried without the array. i tried with "cookie" instead of "cookies" I've tried several different formats and can't seem to get it to work. I even tried using the custom headers, and while logs of the webserver did in fact show that the request object to the servr contained the cookie header it didn't populate the document.cookie int he phantomJS render.

Am I doing something wrong? Or are cookies not fully supporter by webshot?

webshot fails when specifiying userAgent string with parens

As soon as I'm passing a real UA string containing ( and ) to webshot's options webshot will fail.

My options look like:

{
    screenSize: {
        width: 320
        , height: 480
    }
    , shotSize: {
        width: 320
        , height: 'all'
    }
    , userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
}

The error message I am seeing is the following:

c:\Users\me\my-project>  "c:\Users\me\AppData\Roaming\npm\\node.exe"  "c:\Users\me\AppData\Roaming\npm\\node_modules\phantomjs\bin\phantomjs" c:\Users\me\my-project\node_modules\webshot\lib/webshotphantom.js http://my.url.com c:\Users\me\my-project/screencaptures/2014-07-29/my-target-file.jpg false "{\"windowSize\":{\"width\":320,\"height\":480},\"shotSize\":{\"width\":320,\"height\":\"all\",\"shotOffset\":{\"left\":0,\"right\":0,\"top\":0,\"bottom\":0},\"streamType\":\"png\",\"siteType\":\"url\",\"quality\":75,\"settings\":{\"userAgent\":\"Mozilla5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit531.21.20 (KHTML, like Gecko) Mobile7B298g\"}}"

When I omit the userAgent option it will work like a charm. Even stranger: When I remove the parens from the passed string like:

Mozilla/5.0 iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us AppleWebKit/531.21.20 KHTML, like Gecko Mobile/7B298g

it will work too.

My setup:
Windows 8
Node 0.10.22
PhantomJS 1.9.7
Webshot 0.15.0

Add login example

I'd like a more straightforward way of passing webshot the session credentials, for example, I want to take a screenshot of a working document on save. Right now I just get a login screen.

Perhaps a working example of how to pass phantom the info.

addCookie() - how to use!?

Hi!
node-webshot is great tool!
I have simple question: how to use addCookie function (PhantomJS). I tried to implement it with node-webshot but without success. In my case I have to set cookie before screenshot.

Thanks for any help!

M.

Update zoomFactor default value to 1.0 at README

It should be 1.0 instead of undefined. Forgot to update that. Oops.

Offset values for shotSize

Feature request:
Say I want to shot a portion of the page.
top: 50px, left:50px, width: all - 70px, height: all - 90px

shotSize: {
width: 'all',
height: 'all',
topOffset: 50,
leftOffset: 50,
widthOffset: -70,
heightOffset: -90
}

Image generation not working using google fonts.

I posted a stackoverflow question here. http://stackoverflow.com/questions/21490649/snapshot-html-pages-then-convert-to-image-using-node-js-and-phantom

shotSize 'all' option not working

We managed to work around this by commenting out the width/height options in the clipRect part of the phantom script.