Skip to content

October 3, 2012

PhantomJs: The best way to save rendered HTML page into an image file

by Joe Kuan

Suppose you have an HTML page that overflows with scrollbars but you want to save the whole content into an image file. You don’t need to use canvas, CutyCapt, browser add-on, etc. PhantomJs is your new best friend: a headless webkit. Install and follow the quick start guide.

Then setup a simple JavaScript file, export, to load the webpage and save it in an image file:

var page = require('webpage').create();
page.open('http://amazon.com', function () {
    page.render('export.png');
    phantom.exit();
});

From a browser:

Then run the PhantomJs command:

macbook-pro:~/Downloads/phantomjs-1.7.0-macosx/bin>./phantomjs /tmp/export 

which export the webpage to a long stretched image file:

 

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

Follow

Get every new post delivered to your Inbox.

Join 34 other followers

%d bloggers like this: