Skip to content

Latest commit

 

History

History
150 lines (95 loc) · 5.49 KB

index.md

File metadata and controls

150 lines (95 loc) · 5.49 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, use query params to adjust to any size you need with the width and height params. When only one param is passed, the API will maintain the aspect ratio of the original image.

?width=400

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

?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 first need an API key. You may retrieve one by signing up here.

Free API Key{: .btn .btn-blue .fs-5 .mb-4 .mb-md-0 } API Docs{: .btn .fs-5 .mb-4 .mb-md-0 }