Generate image from html

Using the HTML/CSS to Image API

To generate an image, make an HTTP request to the API.

post https://hcti.io/v1/image 

Parameters

The create image endpoint accepts the following parameters. Accepted as either json or formdata .

Name	Type	Description
html *	String	This is the HTML you want to render. You can send an HTML snippet ( Your content ) or an entire webpage.
css	String	The CSS for your image. When using with url it will be injected into the page.
url *	String	The fully qualified URL to a public webpage. Such as https://htmlcsstoimage.com . When passed this will override the html param and will generate a screenshot of the url.

For creating an image, either url or html are required. css is optional.

Additional parameters

Optional parameters for greater control over your image.

Name	Type	Description
google_fonts	String	Google fonts to be loaded. Example: Roboto . Multiple fonts can be loaded like this: Roboto|Open Sans
selector	String	A CSS selector for an element on the webpage. We’ll crop the image to this specific element. For example: section#complete-toolkit.container-lg
ms_delay	Integer	The number of milliseconds the API should delay before generating the image. This is useful when waiting for JavaScript. We recommend starting with 500 . Large values slow down the initial render time.
device_scale	Double	This adjusts the pixel ratio for the screenshot. Minimum: 1 , Maximum: 3 .
render_when_ready	Boolean	Set to true to control when the image is generated. Call ScreenshotReady() from JavaScript to generate the image. Learn more.
full_screen	Boolean	When set to true, the API will generate an image of the entire height of the page.
viewport_width	Integer	Set the width of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.
viewport_height	Integer	Set the height of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.

Example responses

STATUS: 429 TOO MANY REQUESTS 

Getting an image

After creating an image, you can use the returned URL to either download your image, or use it directly in your website.

get https://hcti.io/v1/image/:image_id 

This URL is permanent for as long as your account is active. It’s automatically cached and optimized by Cloudflare’s global content delivery network. You can use it directly on your webpages and not worry about hurting your page speed score.

• Lossless optimization: each image is optimized with no change in image quality.
• Global cache: the image is cached near your users to reduce latency.

File formats

The API supports jpg , png and webp . If no file extension is passed, you’ll get back a png by default. If you need a different file format, adjust the extension on the url.

Format	Example
png	https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.png
jpg	https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.jpg
webp	https://hcti.io/v1/image/a3ab2ab2-906e-4b5c-a88d-41a1c3f3779e.webp

The API returns png by default. If no extension is on the URL, a png will be generated.

Query parameters

Query parameters can be added to the URL to adjust your image.

Name	Type	Description
height	Integer	The height of the image. Maximum 5000 .
width	Integer	The width of the image. Maximum 5000 .
dl	Integer	Set dl=1 and the image will be served as a downloadable attachment.

Deleting an image

delete https://hcti.io/v1/image/:image_id 

To delete an image using the API, you can send a DELETE request to your image URL. This will remove your image from our servers and clear the caching for the image in our CDN.

All data and copies of the image are deleted. This cannot be undone.

Example response

Checking account usage

get https://hcti.io/v1/usage 

To check your account usage, you can make a request to the usage endpoint. It will return the total images created for your account rolled up into different time periods.

We recommend using this endpoint for tracking your usage in tools such as Datadog.

Example response

< "data": < "hour": < "2021-11-14T14:00:00Z": 54, "2021-11-14T15:00:00Z": 56, "2021-11-14T16:00:00Z": 56, "2021-11-14T17:00:00Z": 57, "2021-11-14T18:00:00Z": 59, "2021-11-14T19:00:00Z": 55, "2021-11-14T20:00:00Z": 58, "2021-11-14T21:00:00Z": 54, "2021-11-14T22:00:00Z": 57, "2021-11-14T23:00:00Z": 57, "2021-11-15T00:00:00Z": 60, "2021-11-15T01:00:00Z": 56, "2021-11-15T02:00:00Z": 56, "2021-11-15T03:00:00Z": 55, "2021-11-15T04:00:00Z": 57, "2021-11-15T05:00:00Z": 55, "2021-11-15T06:00:00Z": 55, "2021-11-15T07:00:00Z": 56, "2021-11-15T08:00:00Z": 55, "2021-11-15T09:00:00Z": 60, "2021-11-15T10:00:00Z": 62, "2021-11-15T11:00:00Z": 60, "2021-11-15T12:00:00Z": 62, "2021-11-15T13:00:00Z": 62, "2021-11-15T14:00:00Z": 62, "2021-11-15T15:00:00Z": 61, "2021-11-15T16:00:00Z": 61, "2021-11-15T17:00:00Z": 60, "2021-11-15T18:00:00Z": 61, "2021-11-15T19:00:00Z": 64, "2021-11-15T20:00:00Z": 61, "2021-11-15T21:00:00Z": 61, "2021-11-15T22:00:00Z": 62, "2021-11-15T23:00:00Z": 63, "2021-11-16T00:00:00Z": 62, "2021-11-16T01:00:00Z": 62, "2021-11-16T02:00:00Z": 60, "2021-11-16T03:00:00Z": 60, "2021-11-16T04:00:00Z": 62, "2021-11-16T05:00:00Z": 53, "2021-11-16T06:00:00Z": 60, "2021-11-16T07:00:00Z": 60, "2021-11-16T08:00:00Z": 60, "2021-11-16T09:00:00Z": 60, "2021-11-16T10:00:00Z": 60, "2021-11-16T11:00:00Z": 60, "2021-11-16T12:00:00Z": 68, "2021-11-16T13:00:00Z": 62, "2021-11-16T14:00:00Z": 61, "2021-11-16T15:00:00Z": 60, "2021-11-16T16:00:00Z": 60, "2021-11-16T17:00:00Z": 65, "2021-11-16T18:00:00Z": 63, "2021-11-16T19:00:00Z": 60, "2021-11-16T20:00:00Z": 60, "2021-11-16T21:00:00Z": 60, "2021-11-16T22:00:00Z": 62, "2021-11-16T23:00:00Z": 61, "2021-11-17T00:00:00Z": 60, "2021-11-17T01:00:00Z": 60, "2021-11-17T02:00:00Z": 65, "2021-11-17T03:00:00Z": 63, "2021-11-17T04:00:00Z": 62, "2021-11-17T05:00:00Z": 63, "2021-11-17T06:00:00Z": 63, "2021-11-17T07:00:00Z": 64, "2021-11-17T08:00:00Z": 63, "2021-11-17T09:00:00Z": 64, "2021-11-17T10:00:00Z": 60, "2021-11-17T11:00:00Z": 61, "2021-11-17T12:00:00Z": 61, "2021-11-17T13:00:00Z": 29 >, "day": < "2021-09-19T00:00:00Z": 1569, "2021-09-20T00:00:00Z": 1722, "2021-09-21T00:00:00Z": 1604, "2021-09-22T00:00:00Z": 1560, "2021-09-23T00:00:00Z": 1571, "2021-09-24T00:00:00Z": 1627, "2021-09-25T00:00:00Z": 1660, "2021-09-26T00:00:00Z": 1527, "2021-09-27T00:00:00Z": 1588, "2021-09-28T00:00:00Z": 1549, "2021-09-29T00:00:00Z": 1523, "2021-09-30T00:00:00Z": 1662, "2021-10-01T00:00:00Z": 1556, "2021-10-02T00:00:00Z": 1585, "2021-10-03T00:00:00Z": 1539, "2021-10-04T00:00:00Z": 1556, "2021-10-05T00:00:00Z": 1487, "2021-10-06T00:00:00Z": 1580, "2021-10-07T00:00:00Z": 1498, "2021-10-08T00:00:00Z": 1485, "2021-10-09T00:00:00Z": 1474, "2021-10-10T00:00:00Z": 1487, "2021-10-11T00:00:00Z": 1513, "2021-10-12T00:00:00Z": 1477, "2021-10-13T00:00:00Z": 1464, "2021-10-14T00:00:00Z": 1458, "2021-10-15T00:00:00Z": 1452, "2021-10-16T00:00:00Z": 1477, "2021-10-17T00:00:00Z": 1471, "2021-10-18T00:00:00Z": 1482, "2021-10-19T00:00:00Z": 1499, "2021-10-20T00:00:00Z": 1504, "2021-10-21T00:00:00Z": 1530, "2021-10-22T00:00:00Z": 1502, "2021-10-23T00:00:00Z": 1501, "2021-10-24T00:00:00Z": 1486, "2021-10-25T00:00:00Z": 1475, "2021-10-26T00:00:00Z": 1469, "2021-10-27T00:00:00Z": 1460, "2021-10-28T00:00:00Z": 1451, "2021-10-29T00:00:00Z": 1443, "2021-10-30T00:00:00Z": 1447, "2021-10-31T00:00:00Z": 1443, "2021-11-01T00:00:00Z": 1455, "2021-11-02T00:00:00Z": 1473, "2021-11-03T00:00:00Z": 1482, "2021-11-04T00:00:00Z": 1463, "2021-11-05T00:00:00Z": 1472, "2021-11-06T00:00:00Z": 1452, "2021-11-07T00:00:00Z": 1469, "2021-11-08T00:00:00Z": 1478, "2021-11-09T00:00:00Z": 1494, "2021-11-10T00:00:00Z": 1469, "2021-11-11T00:00:00Z": 1471, "2021-11-12T00:00:00Z": 1465, "2021-11-13T00:00:00Z": 1462, "2021-11-14T00:00:00Z": 1336, "2021-11-15T00:00:00Z": 1427, "2021-11-16T00:00:00Z": 1461, "2021-11-17T00:00:00Z": 838 >, "month": < "2020-12-01T00:00:00Z": 44847, "2021-01-01T00:00:00Z": 44973, "2021-02-01T00:00:00Z": 43263, "2021-03-01T00:00:00Z": 59095, "2021-04-01T00:00:00Z": 56422, "2021-05-01T00:00:00Z": 50747, "2021-06-01T00:00:00Z": 46309, "2021-07-01T00:00:00Z": 46777, "2021-08-01T00:00:00Z": 48160, "2021-09-01T00:00:00Z": 47341, "2021-10-01T00:00:00Z": 46251, "2021-11-01T00:00:00Z": 24167 >>, "per_billing_period": [ < "total_images": 439, "start": "2018-11-02T22:57:29.015Z", "end": "2018-12-02T22:57:29.015Z" >, < "total_images": 3744, "start": "2018-12-02T22:57:29.015Z", "end": "2019-01-01T22:57:29.015Z" >, < "total_images": 595, "start": "2019-01-01T22:57:29.015Z", "end": "2019-01-31T22:57:29.015Z" >, < "total_images": 123570, "start": "2019-01-31T22:57:29.015Z", "end": "2019-03-02T22:57:29.015Z" >, < "total_images": 55398, "start": "2019-03-02T22:57:29.015Z", "end": "2019-04-01T22:57:29.015Z" >, < "total_images": 40935, "start": "2019-04-01T22:57:29.015Z", "end": "2019-05-01T22:57:29.015Z" >] > 

Need help?

Talk to a human. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.

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

Page last modified: Jul 23 2023 at 07:05 PM .

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A Node.js module that generates images from HTML

License

frinyvonnick/node-html-to-image

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Bumps [json5](https://github.com/json5/json5) from 2.2.1 to 2.2.3. — [Release notes](https://github.com/json5/json5/releases) — [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) — [Commits](json5/json5@v2.2.1. v2.2.3) — updated-dependencies: — dependency-name: json5 dependency-type: indirect . Signed-off-by: dependabot[bot] Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot]

Git stats

Files

Failed to load latest commit information.

README.md

Welcome to node-html-to-image 🌄

A Node.js library that generates images from HTML

This module exposes a function that generates images (png, jpeg) from HTML. It uses puppeteer in headless mode to achieve it. Additionally, it embarks Handlebars to provide a way to add logic in your HTML.

npm install node-html-to-image # or yarn add node-html-to-image

Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API.

const nodeHtmlToImage = require('node-html-to-image') nodeHtmlToImage( output: './image.png', html: 'Hello world!' >) .then(() => console.log('The image was created successfully!'))

The library is written in Typescript so it is available out of the box:

import nodeHtmlToImage from 'node-html-to-image'

List of all available options:

option	description	type	required
output	The ouput path for generated image	string	optional
html	The html used to generate image content	string	required
type	The type of the generated image	jpeg or png (default: png)	optional
quality	The quality of the generated image (only applicable to jpg)	number (default: 80)	optional
content	If provided html property is considered an handlebars template and use content value to fill it	object or Array	optional
waitUntil	Define when to consider markup succeded. Learn more.	string or Array (default: networkidle0)	optional
puppeteer	The puppeteer property let you use a different puppeteer library (like puppeteer-core or puppeteer-extra).	object (default: puppeteer)	optional
puppeteerArgs	The puppeteerArgs property let you pass down custom configuration to puppeteer. Learn more.	object	optional
beforeScreenshot	An async function that will execute just before screenshot is taken. Gives access to puppeteer page element.	Function	optional
transparent	The transparent property lets you generate images with transparent background (for png type).	boolean	optional
encoding	The encoding property of the image. Options are binary (default) or base64 .	string	optional
selector	The selector property lets you target a specific element to perform the screenshot on. (default body )	string	optional
handlebarsHelpers	The handlebarsHelpers property lets add custom logic to the templates using Handlebars sub-expressions. Learn more.	object	optional

Setting output image resolution

node-html-to-image takes a screenshot of the body tag’s content. If you want to set output image’s resolution you need to set its dimension using CSS like in the following example.

const nodeHtmlToImage = require('node-html-to-image') nodeHtmlToImage( output: './image.png', html: `   body  width: 2480px; height: 3508px; >   Hello world!  ` >) .then(() => console.log('The image was created successfully!'))

Handlerbars is a templating language. It generates HTML from a template and an input object. In the following example we provide a template to node-html-to-image and a content object to fill the template.

const nodeHtmlToImage = require('node-html-to-image') nodeHtmlToImage( output: './image.png', html: 'Hello >!', content:  name: 'you' > >) .then(() => console.log('The image was created successfully!'))

Handlebars provides a lot of expressions to handle common use cases like conditions or loops.

Handlerbars sub-expressions can be used to add custom logic to the templates. To do this, you must pass a handlebarsHelpers object with functions defined within.

For example, if you had a variable and wanted to do some conditional rendering depending on its value, you could do this:

const nodeHtmlToImage = require('node-html-to-image') nodeHtmlToImage( output: './image.png', content:  myVar: 'foo' >, handlebarsHelpers:  equals: (a, b) => a === b, >, html: `   >
Foo
> >
Bar
>  ` >)

If you want to display an image which is stored remotely do it as usual. In case your image is stored locally I recommend having your image in base64 . Then you need to pass it to the template with the content property. Here is an example:

const nodeHtmlToImage = require('node-html-to-image') const fs = require('fs'); const image = fs.readFileSync('./image.jpg'); const base64Image = new Buffer.from(image).toString('base64'); const dataURI = 'data:image/jpeg;base64,' + base64Image nodeHtmlToImage( output: './image.png', html: '', content:  imageSource: dataURI > >)

If you want to apply fonts, you need to synchronize your parts loading of your website. One way doing it is to convert your font to base64 and add it to your style in your html. For example:

const font2base64 = require('node-font2base64') const _data = font2base64.encodeToDataUrlSync('../my/awesome/font.ttf') const html = `   @font-face < font-family: 'testFont'; src: url($_data>) format('woff2'); // don't forget the format! > /style> /head> ...

Using the buffer instead of saving to disk

If you don’t want to save the image to disk and would rather do something with it immediately, you can use the returned value instead! The example below shows how you can generate an image and send it back to a client via using express.

const express = require('express'); const router = express.Router(); const nodeHtmlToImage = require('node-html-to-image'); router.get(`/api/tweet/render`, async function(req, res)  const image = await nodeHtmlToImage( html: '
Check out what I just did! #cool
' >); res.writeHead(200,  'Content-Type': 'image/png' >); res.end(image, 'binary'); >);

Generating multiple images

If you want to generate multiple images in one call you must provide an array to the content property.

To save on the disk you must provide the output property on each object in the content property.

nodeHtmlToImage( html: 'Hello >!', content: [ name: 'Pierre', output: './image1.png' >,  name: 'Paul', output: './image2.png' >,  name: 'Jacques', output: './image3.png' >] >) .then(() => console.log('The images were created successfully!'))

If you don’t want to save the images to disk you can use the returned value instead. It returns an array of Buffer objects.

const images = await nodeHtmlToImage( html: 'Hello >!', content: [ name: 'Pierre' >,  name: 'Paul' >,  name: 'Jacques' >] >)

Using different puppeteer libraries

If you want to use different puppeteer library you must provide the puppeteer property.

const chrome = require('chrome-aws-lambda'); const nodeHtmlToImage = require('node-html-to-image') const puppeteerCore = require('puppeteer-core'); const image = await nodeHtmlToImage( html: '
Hello
', puppeteer: puppeteerCore, puppeteerArgs:  args: chromium.args, executablePath: await chrome.executablePath, > >)

Источник