Skip to content

Latest commit

 

History

History
154 lines (98 loc) · 5.5 KB

index.md

File metadata and controls

154 lines (98 loc) · 5.5 KB
Raw
title layout nav_order
HTML/CSS to Image API
default
1

HTML/CSS to Image API

{: .fs-9 }

Your search for pixel perfect image generation ends here. {: .fs-6 .fw-300 }

Live demo{: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } Get an API Key{: .btn .fs-5 .mb-4 .mb-md-0 }

The API for generating high quality images from HTML/CSS. No yak shaving required.

  • converts HTML to png, jpg or webp
  • screenshot any url
  • no janky fonts, or blurry images

Converting HTML to a png

This image was created using just HTML/CSS and the HCTI API.

{% cloudinary /assets/images/dog-rates-example.png alt="Image auto generated with HTML/CSS to Image" %}
```html
This is Little Bear. He tolerates baths because he knows how phenomenal his floof will appear afterwards. 13/10

WeRateDogs

@dog_rates
```

Try it yourself{: .btn .btn-green .fs-5 .mb-4 .mb-md-0 .mr-2 }

Quick start example code

To get started quickly, take a look at our example code.

Prefer #NoCode? We also integrate with Zapier and Make.

{% include hint.md title="Works with any language" text="Your favorite language not here? Don't worry, we work with any language or framework. See the curl example for how to make a request. Email us if you need help getting started. We'd love to add more example code here." %}

Image Examples

Your imagination is the only limit. We render HTML/CSS just like Google Chrome. Here are a few examples of ways people have used the API to automate their image generation.

Social Images: Dev.to

Dev.to uses the API to autogenerate thousands of custom images for Twitter and Facebook.

{% cloudinary /assets/images/image%20%2823%29.png alt="Dev.to social card generated from HTML" %}

To see how they do it, take a look at their code (it's open source!).

Product Hunt Makers Social Cards

{% cloudinary /assets/images/f356dffe-d99f-487e-bb16-74dc076c0657.jpeg alt="Product Hunt social image" %}

Product Hunt uses HTML/CSS to Image to dynamically generate social cards for Maker Goals.

Source code for this example on CodePen.

Remote Stories Social Cards

{% cloudinary /assets/images/7e2da2be-7328-4746-ae69-418b295360ae.jpeg alt="Remote stories social image from html" %}

Source code for this example on CodePen.

Highlighted Text Shots

Generate images from your users comments. Add the ability to highlight and share.

{% cloudinary /assets/images/textshot2.png alt="User comment auto generated text shot" %}

Source code for this example on CodePen.

Auto Generated Job Listing

Generate images from job listings for sharing in emails, ads or social media.

{% cloudinary /assets/images/jobad.jpeg alt="Autogenerated image for a job advertisement" %}

Source code for this example on CodePen.

Full Webpage Screenshots

Pass a URL or entire webpage to the API to generate a full page screenshot. Here we passed stripe.com's to the API.

{% cloudinary /assets/images/stripe.png alt="Convert a url to a screenshot API" %}

Screenshot part of a page

Use the selector param to focus on a specific part of a page.

{% cloudinary /assets/images/url-selector-example.png alt="Use a CSS selector to crop an image" %}

Resize on the Fly

Once an image is generated, you can adjust its size using query parameters:

  • width: Set the image width (e.g., ?width=400)
  • height: Set the image height (e.g., ?height=300)

When only one parameter is specified, the API maintains the original aspect ratio automatically.

Example with width=400:

{% cloudinary /assets/images/w400.jpeg sizes="200px" alt="Auto adjust the width of your image" %}

Example with height=300:

{% cloudinary /assets/images/h300.jpeg sizes="300px" alt="Auto adjust the height of your image" %}

Get an API key

To use this API, you'll need an API key. Get started for free:

Get an API Key{: .btn .btn-blue .fs-5 .mb-4 .mb-md-0 .mr-2 } View API Docs{: .btn .fs-5 .mb-4 .mb-md-0 }