### Install node-html-to-image using npm or yarn
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
This snippet shows how to install the node-html-to-image package using either npm or yarn package managers. It's a prerequisite for using the library.
```bash
npm install node-html-to-image
# or
yarn add node-html-to-image
```
--------------------------------
### Basic HTML to Image Conversion in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
A simple example demonstrating the core functionality of node-html-to-image. It takes a basic HTML string and an output path to generate a PNG image.
```javascript
const nodeHtmlToImage = require('node-html-to-image')
nodeHtmlToImage({
output: './image.png',
html: 'Hello world!'
})
.then(() => console.log('The image was created successfully!'))
```
--------------------------------
### Setting Image Resolution with CSS in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
This example shows how to control the output image's resolution by applying CSS styles (width and height) to the body element within the HTML content.
```javascript
const nodeHtmlToImage = require('node-html-to-image')
nodeHtmlToImage({
output: './image.png',
html: `
Hello world!
`
})
.then(() => console.log('The image was created successfully!'))
```
--------------------------------
### HTML to Image with Handlebars Templating
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
An example showcasing the use of Handlebars templating with node-html-to-image. It renders HTML from a template string and populates it with data from the 'content' object.
```javascript
const nodeHtmlToImage = require('node-html-to-image')
nodeHtmlToImage({
output: './image.png',
html: 'Hello {{name}}!',
content: { name: 'you' }
})
.then(() => console.log('The image was created successfully!'))
```
--------------------------------
### Running Tests
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=dependencies
Command to execute the test suite for the node-html-to-image project.
```bash
yarn test
```
--------------------------------
### TypeScript Import for node-html-to-image
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Demonstrates how to import the node-html-to-image library in a TypeScript project, utilizing its built-in TypeScript support.
```typescript
import nodeHtmlToImage from 'node-html-to-image'
```
--------------------------------
### Generate Multiple Images from HTML Content in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Demonstrates how to generate multiple images in a single call by providing an array to the `content` property. Each object in the array can specify unique content and an output path.
```javascript
nodeHtmlToImage({
html: 'Hello {{name}}!',
content: [{ name: 'Pierre', output: './image1.png' }, { name: 'Paul', output: './image2.png' }, { name: 'Jacques', output: './image3.png' }]
})
.then(() => console.log('The images were created successfully!'))
```
--------------------------------
### Use Handlebars Helpers for Conditional Rendering in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Demonstrates how to use custom Handlebars helpers to add conditional logic within HTML templates for image generation. This allows for dynamic content rendering based on variable values.
```javascript
const nodeHtmlToImage = require('node-html-to-image')
nodeHtmlToImage({
output: './image.png',
content: { myVar: 'foo' },
handlebarsHelpers: {
equals: (a, b) => a === b,
},
html: `
{{#if (equals myVar 'foo')}}Foo
{{/if}}
{{#if (equals myVar 'bar')}}Bar
{{/if}}
`
})
```
--------------------------------
### Generate Image Buffer Directly in Node.js with Express
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Shows how to generate an image and immediately send it as a response to a client using Express.js, avoiding the need to save the image to disk.
```javascript
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');
});
```
--------------------------------
### Use Different Puppeteer Libraries for Image Generation in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Explains how to specify a custom Puppeteer library (e.g., `puppeteer-core`) for image generation. This allows for flexibility in choosing the underlying browser automation tool and its configuration.
```javascript
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,
}
})
```
--------------------------------
### Handle Local Images with Base64 Encoding in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Explains how to display local images in generated images by encoding them into Base64 format. The Base64 string is then passed to the HTML template via the `content` property.
```javascript
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 }
})
```
--------------------------------
### Generate Multiple Image Buffers in Node.js
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Shows how to generate multiple images without saving them to disk, returning an array of Buffer objects instead. This is useful for further processing or immediate client-side delivery.
```javascript
const images = await nodeHtmlToImage({
html: 'Hello {{name}}!',
content: [{ name: 'Pierre' }, { name: 'Paul' }, { name: 'Jacques' }]
})
```
--------------------------------
### Embedding Custom Fonts via Base64 Encoding
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=code
Explains how to apply custom fonts to generated images by converting font files (e.g., TTF) to Base64 data URIs and embedding them within the `
...
```
```
--------------------------------
### Embed Custom Fonts using Base64 in HTML for Image Generation
Source: https://www.npmjs.com/package/node-html-to-image/index_activetab=readme
Illustrates how to embed custom fonts into HTML for image generation by converting the font file to a Base64 data URI. This ensures consistent font rendering across different environments.
```javascript
const font2base64 = require('node-font2base64')
const _data = font2base64.encodeToDataUrlSync('../my/awesome/font.ttf')
const html = `
...
`
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.