How to turn an HTML webpage into an image
There are many ways to convert an HTML page into an image, such as using a library like:
Dom-to-image
Chrome Headless
Orr by using a wrapper library like Puppeteer.
In this Answer, we will try to achieve the same without using any library.
Let's do this with the help of an example.
Conversion using Canvas
Follow the steps below to convert an HTML webpage into an image using canvas.
We cannot directly draw the HTML into Canvas due to security reasons. So, we will follow another approach that will be safer.
Steps
Create SVG Image that will contain the rendering content.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"></svg>
Insert <foreignObject> element inside the SVG, which will contain the HTML.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +<foreignObject width="100%" height="100%"></foreignObject></svg>
Add the XHTML content inside the <foreignObject> node.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">.<style>em{color:red;}</style>Hey there...</div></foreignObject></svg>
Create the image object and set the src of an image to the data URL of the image.
const tempImg = document.createElement('img')tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">Hey there...</div></foreignObject></svg>')
Draw this Image onto Canvas and set canvas data to target img.src.
const newImg = document.createElement('img')newImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">Hey there...</div></foreignObject></svg>')// add event listener to image.newImg.addEventListener('load', onNewImageLoad)// method to draw image to canvas and set data to target img.srcfunction onNewImageLoad(e){ctx.drawImage(e.target, 0, 0)targetImg.src = canvas.toDataURL()}
Here is the complete executable code with output.
Why is using SVG and Canvas safe?
The implementation of SVG images can be restrictive because we don't allow SVG images to load external resources, even if the external resources appear on the same domain. We are not allowed to script an SVG image because there is no way to access the DOM of an SVG image from other scripts, and DOM elements in SVG images do not receive input events. Therefore, there is no way to load privileged information into a form control (such as a full path in a <input type="file">) and render it.
From a security point of view, it is important that the script cannot directly touch DOM nodes that are rendered to the canvas.
Free Resources
- undefined by undefined
