repository·master·Indexed 25 days ago
https://github.com/cburgmer/rasterizehtml.jsA JavaScript library (version 1.4.1) that renders HTML content into a browser's canvas element. It provides functions such as drawHTML(), drawDocument(), and drawURL() to convert HTML strings, DOM documents, or web pages into canvas drawings by embedding content into an SVG <foreignObject>. The library handles external resource conversion to data URIs and supports Chrome, Firefox, Safari, and Microsoft Edge, while requiring Same-Origin or CORS configuration for external resources.
All resources required for drawing (the HTML page, CSS, images, fonts, and JS) must be from the same origin as the current page.
If you need to load resources from a different domain, you must use CORS (Cross-Origin Resource Sharing). For example, drawURL() can only load pages from the same domain as the current page unless CORS is properly configured on the target server.
Because browsers restrict direct HTML-to-canvas rendering for security, rasterizeHTML.js uses a workaround: it embeds the HTML into an SVG <foreignObject> and then draws that SVG image onto the canvas using ctx.drawImage().
Since SVG <foreignObject> elements are not allowed to link to external resources, the library automatically loads external images, fonts, and stylesheets and converts them into inline data: URIs or inline style elements before rendering.
To use the library in a TypeScript project, import the type definitions as follows:
import * as rasterizeHTML from 'rasterizehtml';Install the package via npm:
$ npm install rasterizehtmlTo use it in your project, include the script tag pointing to node_modules/rasterizehtml/dist/rasterizeHTML.allinone.js or use browserify to require it.
Use rasterizeHTML.drawHTML() to render a string of HTML directly onto a specified HTML5 canvas element. The library handles embedding the HTML into an SVG <foreignObject> and drawing it via ctx.drawImage().
var canvas = document.getElementById("canvas");
rasterizeHTML.drawHTML('Some ' +
'<span style="color: green; font-size: 20px;">HTML</span>' +
' with an image <img src="someimg.png">',
canvas);Options object allows you to fine-tune the rendering process. You can pass these key-value pairs to any of the draw* functions.When calling drawHTML, drawDocument, or drawURL, you can pass an options object to control the viewport size.
width: The desired width of the rasterized output.height: The desired height of the rasterized output.If a canvas is provided, the library will attempt to use the canvas's existing width and height as fallbacks if options.width or options.height are undefined.
drawHTML(html, [canvas], [options]) to convert an HTML string into a canvas drawing. This method parses the provided HTML string and uses the internal rasterization engine to draw it onto the specified canvas. If no canvas is provided, the dimensions will be determined by the default viewport or the fallback logic. Returns a Promise that resolves with the result of the rasterization.drawURL(url, [canvas], [options]) to fetch a web page from a URL and render it onto a canvas. This method handles loading the document from the network and includes a workaround for Firefox to ensure stylesheets are loaded correctly. Returns a Promise.drawDocument(document, [canvas], [options]) to render an existing DOM Document object to a canvas. This is useful when you have already parsed or manipulated a document in memory and want to rasterize it directly without re-parsing an HTML string.The rasterizeHTML namespace provides three primary functions to render HTML content onto an HTML5 HTMLCanvasElement or OffscreenCanvas. All functions return a Promise that resolves with a RenderResult on success or rejects with an Error on failure.
drawHTML(html, canvas, options): Renders a raw HTML string.drawURL(url, canvas, options): Renders a document from a specific URL.drawDocument(document, canvas, options): Renders an existing Document object. Note that executeJs is not available when using drawDocument.