How to convert html & css to an image?

user_1574004 0
Viewed 22410

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.

canvas css image html php
3 Answers

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

user_25100
Related