foreign-html-renderer

1.1.0 • Public • Published

foreign-html-renderer

A library to render HTML to images using the SVG <foreignObject> element.

The process is detailed in this blog post.

No dependencies

Installation

npm install foreign-html-renderer

foreign-html-renderer is an ES module.

However, dist/foreign-html-renderer.min.js is not, this file will create a global ForeignHtmlRenderer object. This will likely change in the near future as ESM support is now more widespread.

Usage

Creating a renderer

const renderer = new ForeignHtmlRenderer.ImageRenderer(document.styleSheets);

Note that the constructor takes a StyleSheetList argument for style sheets with styles used by the HTML elements to be rendered. To use the style sheets in the current document simply pass document.styleSheets.

Rendering

There are 3 rendering methods, all with the same signature:

const markup = `<p>Hello World</p>`;
const width = 200;
const height = 100;

renderer.renderToBase64Png(markup, width, height);
renderer.renderToCanvas(markup, width, height);
renderer.renderToImage(markup, width, height);

Each method returns a Promise which resolves as follows:

  • renderToBase64Png() resolves to a String; a data URL with the PNG image data
  • renderToCanvas() resolves to an HTMLCanvasElement
  • renderToImage() resolves to an Image

Things to keep in mind

CORS

As with most browser components, <foreignObject> will restrict cross-origin HTTP requests unless CORS headers are sent by the server.

Readme

Keywords

none

Package Sidebar

Install

npm i foreign-html-renderer

Weekly Downloads

4

Version

1.1.0

License

ISC

Unpacked Size

144 kB

Total Files

18

Last publish

Collaborators

  • aautar