Sometimes, we want to render HTML to an image with JavaScript.
In this article, we’ll look at how to render HTML to an image with JavaScript.
How to render HTML to an image with JavaScript?
To render HTML to an image with JavaScript, we use the dom-to-image library.
To install it, we run
npm install dom-to-image
Then we use it by writing
import domtoimage from "dom-to-image";
const node = document.getElementById("my-node");
const dataUrl = await domtoimage.toPng(node);
const img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
to select the node to render to an image with getElementById.
Then we call domtoimage.toPng to render the node to an image.
Next, we create an img element with the Image constructor.
We set its src property to the dataUrl returned by the promise.
And then we append img to the body with appendChild.
Conclusion
To render HTML to an image with JavaScript, we use the dom-to-image library.
