6

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.

Improve this question
3
  • @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. Commented Dec 7, 2013 at 14:37
  • 1
    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. Commented Dec 7, 2013 at 15:06
  • And just as I'd written the above comment I saw that the answer below has been edited to include a PhantomJS/CasperJS example. Commented Dec 7, 2013 at 15:11

4 Answers 4

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I've added some code of example to the answer to have a more complete answer to it.
+1 Very nice! Thank you. I'll wait a little more, to find out if there is a server side solution as well.
1

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"}

Improve this answer

Comments

0

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 !

Improve this answer

1 Comment

can this library convert HTML + CSS page to image ?
0

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.

Improve this answer

2 Comments

"NPM Packages" They are asking for a PHP (or Ruby) solution.
or client side solution @gre_gor

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.