Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
});
@javan

This comment has been minimized.

Copy link
Owner Author

@javan javan commented Jun 19, 2012

@trevorturk

This comment has been minimized.

Copy link

@trevorturk trevorturk commented Jun 19, 2012

🤘

@Davidslv

This comment has been minimized.

Copy link

@Davidslv Davidslv commented Jun 19, 2012

Awesome! Well done!!!

@ismasan

This comment has been minimized.

Copy link

@ismasan ismasan commented Jun 19, 2012

Is it possible to render the image to standard out?

@davidslvto

This comment has been minimized.

Copy link

@davidslvto davidslvto commented Jun 19, 2012

Can you give an example of what you want?

@javan

This comment has been minimized.

Copy link
Owner Author

@javan 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

This comment has been minimized.

Copy link

@ismasan 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

This comment has been minimized.

Copy link
Owner Author

@javan 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

This comment has been minimized.

Copy link

@ismasan 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

This comment has been minimized.

Copy link

@ismasan ismasan commented Jun 19, 2012

Aha! ariya/phantomjs@51ab11c

That might do it.

@ismasan

This comment has been minimized.

Copy link

@ismasan 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

This comment has been minimized.

Copy link
Owner Author

@javan javan commented Jun 20, 2012

@ismasan rad!

@toramanan

This comment has been minimized.

Copy link

@toramanan toramanan commented Mar 30, 2013

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