Skip to content

Instantly share code, notes, and snippets.

@javan
Created June 19, 2012 21:40
Show Gist options
  • Save javan/2956700 to your computer and use it in GitHub Desktop.
Save javan/2956700 to your computer and use it in GitHub Desktop.
Create a screenshot of any URL using phantomjs (headless webkit)
//
// Example usage: phantomjs screenshot.js http://yahoo.com /tmp/yahoo.png
//
var system = require('system');
var url = system.args[1];
var filename = system.args[2];
var page = new WebPage();
page.open(url, function (status) {
page.render(filename);
console.log(filename)
phantom.exit();
});
@Davidslv
Copy link

Awesome! Well done!!!

@ismasan
Copy link

ismasan commented Jun 19, 2012

Is it possible to render the image to standard out?

@davidslvto
Copy link

Can you give an example of what you want?

@javan
Copy link
Author

javan commented Jun 19, 2012

I think you could read the rendered file back in and write it to stdout. http://code.google.com/p/phantomjs/wiki/Interface#Filesystem_Module

@ismasan
Copy link

ismasan commented Jun 19, 2012

Yeah I was thinking it'd be nice and simple to shell out to phantomjs from a Node.js server as a Node Stream and pipe it directly into the response without writing any files. Cheap http://url2png.com/

@javan
Copy link
Author

javan commented Jun 19, 2012

I don't think page.render() will give you back a stream, but maybe it's possible with a little hacking. I'm new to PhantomJS.

@ismasan
Copy link

ismasan commented Jun 19, 2012

Yes the docs for Page#render say it puts the image data in a buffer and then save it to file. It'd be awesome to have access to that buffer in the API. Or just dump the data to standard out. Also useful if you wanted to for example pipe it to ImageMagick and the like for further processing.

@ismasan
Copy link

ismasan commented Jun 19, 2012

Aha! ariya/phantomjs@51ab11c

That might do it.

@ismasan
Copy link

ismasan commented Jun 20, 2012

Yup. Built the 1.6 branch and that works.

page.open(url, function (status) {
console.log(page.renderBase64('PNG'))
phantom.exit();
});

So now I in a node server I can spawn this as a child process, listen to it's 'data' event, encode it back to binary and pipe it to the HTTP response. Obviously sending caching headers and caching on Cloudfront, Varnish, etc.

Voila!

@javan
Copy link
Author

javan commented Jun 20, 2012

@ismasan rad!

@toramanan
Copy link

Hi,
I need to generate PDF instead of the image file. When i tried with 'PDF' to renderBase64, it doesn't work. Thanks.

ariya/phantomjs#10547

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment