Reality-Ize606 / docs

HTML/CSS to Image API - Convert HTML into an image (png, jpg, webp). Renders exactly like Google Chrome.

Home Page:https://docs.htmlcsstoimage.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

description
Convert HTML to an image (jpg, png, webp). Renders images exactly like Google Chrome.

HTML/CSS to Image API

Quick start

Welcome to the API docs! To get started, we recommend taking a look at one of our code samples.

Don't want to write code? That's OK! We also integrate with Zapier and Integromat.

{% page-ref page="example-code/ruby.md" %}

{% page-ref page="example-code/php.md" %}

{% page-ref page="getting-started/zapier-integration.md" %}

{% page-ref page="example-code/javascript.md" %}

{% page-ref page="example-code/c.md" %}

{% page-ref page="example-code/vb.net.md" %}

{% page-ref page="example-code/go.md" %}

{% page-ref page="example-code/curl.md" %}

{% page-ref page="example-code/python.md" %}

{% page-ref page="getting-started/integromat-integration.md" %}

Your favorite language not here? Sorry about that! 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.

@ThePracticalDev

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

Product Hunt Makers Social Cards

https://www.producthunt.com/@syswarren/goals/16979

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

https://hcti.io/v1/image/7e2da2be-7328-4746-ae69-418b295360ae

Source code for this example on CodePen.

Highlighted Text Shots

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

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c

Source code for this example on CodePen.

Auto Generated Job Listing

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

URL: https://hcti.io/v1/image/3bf60f9f-579f-4a88-8534-a1a936ffd15e?width=600

Source code for this example on CodePen.

Full Webpage Screenshots

Pass an entire webpage to the API to generate a full page screenshot. Here we passed stripe.com's homepage HTML to the API.

URL: https://hcti.io/v1/image/2ac52eb8-0c20-4ac6-b0e3-06fb5f421f4a

{% hint style="info" %}

Full page screenshots

When rendering an entire page, be sure to include all of the markup. Including the <html> tags. All external assets (css, javascript, images) must be loaded using a full URL. Relative paths will not work. {% endhint %}

Resize on the Fly

Once an image is generated, use our API to adjust the image 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

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c?width=400

?width=400&height=400

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c?width=400&height=400

?height=300

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c?height=300

Get an API key

To use this API, you'll first need an API key. You may retrieve one by signing up here.

Start creating images from HTML/CSS

Now that you have an API key, get started creating your first image.

{% page-ref page="getting-started/creating-an-image.md" %}

About

HTML/CSS to Image API - Convert HTML into an image (png, jpg, webp). Renders exactly like Google Chrome.

https://docs.htmlcsstoimage.com