Link Search Menu Expand Document

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

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

Image generated with PHP. Convert HTML to an image using 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.

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.


Back to top

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

Page last modified: Apr 9 2024 at 11:04 PM.

Edit this page on GitHub.