Phantomjs with WOFF Support

Phantomjs is a headless browser that allows you to browse a website with scriptable code, it will allow you to test websites, take screenshots and many more things. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

We needed to generate jpeg captures of some of our client’s websites . In order to implement this requirement we analyzed some alternatives like url2png, but for our scenario it was a little bit expensive. That’s why we decided to implement it with Phantomjs.

The implementation was very easy, we just need to grab a page and convert it to jpeg. For that there is several samples in the internet. Like this one

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

Our problems came from the side of the web fonts since as you probably know all fonts are rendered differently in all most all browsers in the planet, everything depends in the fonts installed in the user machine, and the fonts are not usually the same for Linux, Windows or Mac.

Our operators normally works in Windows machines but our Phanthomjs server obviously is a Linux Server, so every time that we build the web page it looks good in the operator browser, but the screenshot sometimes didn’t look so good.

Our first attempt to solve the problem was trying to find a web font that worked well in Windows and in Linux. In our server we installed ms ttf fonts so Phantomjs was able to use all most the same font that in Windows. The most safe Font in our probes was Verdana, it worked the 99% of the times, but the main problem was that the font is awful.

We knew that our salvation was to use some Web Font, like Google Web Fonts, but Phantomjs was not able to support those kind of fonts, WOFF fonts. We found a patch to support WOFF fonts in the version 1.9.0 and we tried it. The patch worked but we found another problem, the quality of the image was very low, without the patch in the same version the images looked perfect, but with the patch we got a bad quality screenshots.

Digging up even more about how to solve this problem we found that Phantomjs 2.0 has support for WOFF so we decided to build this version from scratch. The final results was impressive, WOFF worked as we expected and the quality of the screenshot was like we wanted it.

Here goes the steps to build a Phanthomjs and install it in Debian distribution.

Installation

sudo apt-get update

sudo apt-get install build-essential chrpath libssl-dev libxft-dev libfontconfig1 libfontconfig1-dev libfontconfig1 libfontconfig1-dev

sudo apt-get install ttf-mscorefonts-installer

sudo apt-get install g++ flex bison gperf ruby perl libsqlite3-dev libfontconfig1-dev libicu-dev libfreetype6 libssl-dev libpng-dev libjpeg-dev git

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.0
./build.sh

After a long compilation, 15min in a fast machine, you’ll get the binary file into the bin folder. You have to copy the binary into some path directory for a easy use.

#into the working copy
sudo cp bin/phantomjs /usr/local/bin/
sudo ln -sf /usr/local/bin/phantomjs /usr/local/bin/phantomjs
sudo ln -sf /usr/local/bin/phantomjs /usr/bin/phantomjs

Finally run this command to verify that works

$phantomjs -v
2.0.1-development

More info

http://phantomjs.org/build.html

http://phantomjs.org/screen-capture.html

http://squallssck.github.io/blog/2013/03/07/about-how-to-make-phantomjs-support-google-web-fonts/ (old version, with the patch, don’t use it).

http://arunoda.me/blog/phantomjs-webfonts-build.html (old version, with the patch, don’t use it).

http://code.tutsplus.com/tutorials/testing-javascript-with-phantomjs–net-28243