Email Newsletter Solution: Capture dynamic screenshots

Recently we were working on a dynamic contents generation for an email for one of our client in mobile advertisement domain. As we all know that every email client(MS Outlook,Mac Mail, Gmail etc) have their own support for the styles and html elements.

We found an article on google , which have detailed out the list of supported css/style in different email clients. There are some css support information which seems incorrect but overall conclusion is that it is very time consuming exercise to get proper/desired design of email content or sometime you might not get the desired results at all e.g. ‘radius’ or ‘gradients’ parameters are supported only in html5/css3/webkit.

As email is very crucial part of advertisement campaign as advertiser need to send their ad or deals through email newsletter. This requirement require some out of the box thinking skills so we started to find out some alternative of this css/style based ad. We heavily use webkit css/styles for advertisement components and those displayed perfectly fine on browsers like Firefox,Chrome or Safari but might not work on email clients. After lots of discussion among the team, we got an idea that to take the screenshots on the runtime and send this image in email content easily.

As we were working on ruby on rails, we got a gem IMGKit, which creates JPGs using plain old HTML+CSS. Imgkit uses wkhtmltoimage on the backend which renders HTML using Webkit. ImgKit heavily based on PDFKit . IMGKit is a great tool to convert HTML file/string into image and also supports css file/inline. You need to install wkhtmltoimage with IMGKit so we shall guide you to install the prerequisites and use the gem to generate image by rendering the html on the fly.

Install:

1. IMGKit:

gem install imgkit

2. wkhtmltoimage:

Automatic:

sudo imgkit --install-wkhtmltoimage

install latest version into /usr/local/bin

Manually : If you face any problem with install wkhtmltoimage by command then you can take latest binary from
http://code.google.com/p/wkhtmltopdf/downloads/list and copy at location /usr/local/bin

How To Use:

# IMGKit.new takes the HTML and any options for wkhtmltoimage
# run `wkhtmltoimage --extended-help` for a full list of options
kit = IMGKit.new(html, :quality => 50)
kit.stylesheets << '/path/to/css/file'

# Get the image BLOB
img = kit.to_img
# New in 1.3!
img = kit.to_img(:jpg)      #default
img = kit.to_img(:jpeg)
img = kit.to_img(:png)
img = kit.to_img(:tif)
img = kit.to_img(:tiff)

# Save the image to a file
file = kit.to_file('/path/to/save/file.jpg')
file = kit.to_file('/path/to/save/file.png')

# IMGKit.new can optionally accept a URL or a File.
# Stylesheets can not be added when source is provided as a URL of File.
kit = IMGKit.new('http://google.com')
kit = IMGKit.new(File.new('/path/to/html'))

# Add any kind of option through meta tags
IMGKit.new('

Rails Controller Actions

@kit = IMGKit.new(render_to_string) # we can use also Html string

format.jpg do
send_data(@kit.to_jpg, :type => "image/jpeg", :disposition => 'inline')
end

 

After doing all this set up, IMGKIT was working fine and generating great image from html.But for some cases it was showing an error “QPixmap: Cannot create a QPixmap when no GUI is being used”. Then we tried to find the reason and got that it was happening only for those html which have translate-gradiant(css property). This issue is also listed at here and several people are facing this issue. Then we got that there is an issue with binary of wkhtmltoimage(V 0.11.rc1), we recompiled the latest source code and this time it was working fine for all cases. You can also try wkhtmltoimage(V 0.10.0_rc2) ,this binary also have this fix and works fine.

We would like to have your feedback and would like to answers your query.