I want PhantomJS to generate a PNG

How fast can you setup a Node.js based solution which can generate and return a PNG screenshot of some HTML based on a request using PhantomJS?

22.58 Installing PhantomJS

PhantomJS I will need to render a webpage and then use PhantomJS to get a screenshoot of the rendered HTML.

Open the terminal to see if PhantomJS is already installed:

$ phantomjs
-bash: phantomjs: command not found

This means that it is not installed on my system. I visit PhantomJS website to download and install it.

I downloaded the ZIP file (I am on Mac) and after some looking around I decided to install the phantomjs app found in the bin folder to my “/usr/local/bin” folder. After I did that the “phantomjs” command could be found from the terminal.

23.14 Testing PhantomJS using example javascript

The ZIP file also contains some example javascript files, I copied the “phantomjs-2.1.1-macosx” to a folder where I have my nodeJS code, and renamed it to “phantomjs”. The examples are great. However I decided to copy some code on the page “Screen Capture” and build on that a simple file “screenshoot.js”:

Running that file simply took on command in the terminal:

phantomjs screenshoot.js

The result was a screenshoot of my wordpress blog:

A screenshoot of my blog taken from the terminal, cool!

It took a little longer to get to that point, the time is now: 23.43.

23.45 All I need now is a local webserver with some content!

Ok, I will then create a simple Node.JS based website with some HTML. That should be easy!

The screenshoot of “Hello World”

23.59 It was easy. The above image (“hello world”) is a screenshoot of some content served using a Node.JS + Express based webserver. Now it is only a matter of building the HTML I need a screenshoot of. I have extended the gist to also contain the files needed to create the server.

Conclusion: It’s very easy to do something with such great software!

Using all free and open source javascript based software: Node.JS and PhantomJS I could one late friday night just before midnight construct a prototype to generate a PNG of some HTML content served using a local webserver. I also did this post on Medium during the same time, which was around 1 hour! Pretty amazing! :-)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.