How to convert html & css to an image?

Question

I'm developing an ecard-maker (I know it's awful, not my idea...). Is there any way to convert html and css of a specific dom-element to an image without using flash? I know there is image magick and the like, but it seems to be quite complicated to align and order the text properly.

Preferably I'm looking for a server-side solution, as posting an image from the client could take some time.

I found this: https://code.google.com/p/java-html2image/ but unfortunately I can only use php, ruby or client-side technologies.

Mccalla

@TJonS Not an option. I don't need the image for myself. It should be used inside of an email. As coherent email-templating is difficult and the client definetely wants an image, I don't have much of a choice. – Mccalla

Would you be able to run PhantomJS (github.com/ariya/phantomjs) on the server? It's built on WebKit, so it should render html just as well as any browser. Here's an example of rendering as an image github.com/ariya/phantomjs/wiki/Screen-Capture. – Untenable

And just as I'd written the above comment I saw that the answer below has been edited to include a PhantomJS/CasperJS example. – Untenable

Answer 1

Client Side solution

In Client Side, you can use something like library (that uses HTML 5): http://html2canvas.hertzen.com/ =)

With it, you can use something like:

html2canvas(document.getElementById("element-id"), {
onrendered: function(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png"); // This should be image/png as browsers (only) support it (to biggest compatibilty)
  // Append image (yes, it is a DOM element!) to the DOM and etc here..
}
});

Server Side solution

To get a server side solution, you can use PhantomJS (that uses Webkit) or SlimerJS (that uses Gecko).

A good library that is a wrapper to these two is CasperJS. Using CasperJS, a code that can be used is:

casper.start(casper.cli.args[0], function() {
    this.captureSelector(casper.cli.args[1], casper.cli.args[2]);
});

casper.run();

Save it as screenshot.js (just an example of name, you can choice a name too) and run it by using something like:

casperjs screenshot.js (URL) (image path) (selector)

From any language.

A (possible better) alternative to Server Side

Other option is use Selenium, but this is only valid if you can run Java in your server (and install browsers manually) (PhantomJS/SlimerJS/CasperJS, however, does not have these requeriments)

Use it only if you need to emulate a browser completely (maybe when using plugins...)

The best of Selenium is that you can use wrappers to connect to it (using Selenium Server), see the documentation to get the list: http://code.google.com/p/selenium/w/list

Oberheim

I've added some code of example to the answer to have a more complete answer to it. – Oberheim

+1 Very nice! Thank you. I'll wait a little more, to find out if there is a server side solution as well. – Mccalla

Answer 2

Server Side Solution

I've been using Guzzle + HCTI API to do this. You'll need an HCTI api key, but you can use a free account.

require 'vendor/autoload.php';

$html = "<div class='ping'>Pong ✅</div>";
$css = ".ping { padding: 20px; font-family: 'sans-serif'; }";

$client = new GuzzleHttp\Client();
$res = $client->request('POST', 'https://hcti.io/v1/image', [
  'auth' => ['user_id', 'api_key'],
  'form_params' => ['html' => $html, 'css' => $css]
]);

echo $res->getBody();

Response returns a URL to the image:

{"url":"https://hcti.io/v1/image/5803a3f0-abd3-4f56-9e6c-3823d7466ed6"}

Votyak

Answer 3

I'm using PHPImageWorkshop library (http://phpimageworkshop.com). Really simple and perfect for what you want to do.

It uses the system of "layers" in PHP.

Just initialize your first layer (the image) and create a second layer (your text).

It will create a final image with your first image + the text !

Mcculley

can this library convert HTML + CSS page to image ? – Abramson

Answer 4

Although the question is old but still I am answering it just in case anyone face the similar issue.

There are multiple ways to generate image from html and css on server side.

Using an external api

There are apis like cloudconvert, pictify or HCTI where you can send your html and css and they will generate the image and send back the response. Although most of these apis have limited free tier.

Running a headless browser in server

You can run an instance of headless browser in server to generate the images. I have used puppeteer which works great although it is a little resource consuming.

NPM Packages

Although most of the NPM packages like html-to-image run on the client side and you wanted to avoid it but I think this would be the faster solution than all of the other mentioned methods if the html is already rendered in the browser than you will avoid the time it takes to make a network call or re-loading the webpage in a headless browser.

Footless

"NPM Packages" They are asking for a PHP (or Ruby) solution. – Flux

or client side solution @Flux – Footless

Answer 5

I know a package called satori which is a npm package which is used to convert HTML, CSS code into an image which is used in the META Tags to show the in data. This can also be useful in your case i guess.

Brezin

They are asking for a PHP solution. – Flux