Link Search Menu Expand Document

PHP: HTML/CSS to Image

Generate a png, jpg or webp images with PHP. Renders exactly like Google Chrome. Want to see how it works? Give the live demo a try.

Live demo Get an API Key


Table of contents

Generating images with PHP

The API takes your HTML/CSS and runs it inside a real instance of Google Chrome to convert your html into an image. Use PHP to send the API your HTML/CSS. You’ll get back the URL to your generated image.

For more details on how this works, see Creating an image.

{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d"
}

Image generated with PHP.

Authentication with PHP

The API uses HTTP Basic authentication.

Your username is your User ID and your password is your API Key. Both of these are available from the dashboard. The PHP code sample demonstrates how to authenticate your request.

You can signup for a free API key to get started.

Free API Key for PHP


PHP example code

This PHP code example sends an HTTP POST to the https://hcti.io/v1/image API. Converting your HTML/CSS to an image with PHP.

<?php

$html = <<<EOD
<div class='box'>
  Generated from PHP ✅
</div>
EOD;

$css = <<<EOD
.box { 
  border: 4px solid #03B875; 
  padding: 20px; 
  font-family: 'Roboto'; 
}
EOD;

$google_fonts = "Roboto";

$data = array('html'=>$html,
              'css'=>$css,
              'google_fonts'=>$google_fonts);

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://hcti.io/v1/image");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));

curl_setopt($ch, CURLOPT_POST, 1);
// Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard
curl_setopt($ch, CURLOPT_USERPWD, "user_id" . ":" . "api_key");

$headers = array();
$headers[] = "Content-Type: application/x-www-form-urlencoded";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);
if (curl_errno($ch)) {
  echo 'Error:' . curl_error($ch);
}
curl_close ($ch);
$res = json_decode($result,true);
echo $res['url'];
// https://hcti.io/v1/image/202dc04d-5efc-482e-8f92-bb51612c84cf
?>

PHP example with Guzzle library

Using an HTTP library such as Guzzle can simplify your code even further. Here’s an example of how to use the HTML/CSS to Image API with Guzzle.

Installation instructions for Guzzle are here.

<?php
require 'vendor/autoload.php';

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

$client = new GuzzleHttpClient();
// Retrieve your user_id and api_key from https://htmlcsstoimage.com/dashboard
$res = $client->request('POST', 'https://hcti.io/v1/image', [
  'auth' => ['user_id', 'api_key'],
  'form_params' => ['html' => $html, 'css' => $css]
]);

echo $res->getBody();
// {"url":"https://hcti.io/v1/image/5803a3f0-abd3-4f56-9e6c-3823d7466ed6"}
?>

The code turns out to be a bit more readable and less complex when using Guzzle. A great option if you’re open to adding the library to your project.


Need help?

We’re always looking to improve this documentation. Please send us an email: support@htmlcsstoimage.com. We respond fast.


Back to top

Built with extensive integration tests and serious care for developer happiness.
© 2018-2020 Code Happy, LLC.

Page last modified: Jul 13 2020 at 10:24 PM.

Edit this page on GitHub.