PHP: HTML/CSS to Image

Generate a png, jpg or webp images with PHP. Renders exactly like Google Chrome.

Live demo Get an API Key

---

Table of contents

• Generating images with PHP
• Authentication with PHP
• PHP example code
• PHP example with Guzzle library
• Debugging Error:SSL certificate problem: unable to get local issuer certificate
• Need help?

Generating images with PHP

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

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

Example API response:

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

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.

Debugging Error:SSL certificate problem: unable to get local issuer certificate

When running this script on a Windows machine, it’s possible you’ll get an SSL error. The fix for this is here.

---

Need help?

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

---