How to turn HTML webpage into an Image?

#html #javascript #webdev #css

While working in one of my project I had to implement a feature where I have turn an HTML webpage to an Image. The first thought that occurred to me was to use an inbuilt library but like dom-to-image or using Chrome Headless or a wrapper library like Puppeteer. While working I came across this technique using pure Javascript.

Let's try to achieve this without using any library.

Converting HTML webpage into an Image by using Canvas.

We cannot directly draw the HTML into Canvas due to the security reasons. We will follow another approach which 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 a <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.src

function onNewImageLoad(e){
  ctx.drawImage(e.target, 0, 0)
  targetImg.src = canvas.toDataURL()
}

You can find the complete code in the CodeSandox!

Reasons why using SVG and Canvas is safe?

Implementation of SVG image is very restrictive as we don't allow SVG image to load an external resource even one that appears on the same domain. Scripting in an SVG image is not allowed, there is no way to access the DOM of an SVG image from other scripts, and DOM elements in SVG images cannot receive input events. Thus 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.

The restriction that script can't directly touch DOM nodes that get rendered to the canvas is important from the security point of view.

I tried to cover this topic and steps in brief. Please feel free to add on related to this topic. 😅

Happy Learning!👩‍💻

Top comments (19)

ImTheDeveloper • Apr 10 '22

I imagine the use case was for automation rather than manually doing so.

peerreynders • Apr 11 '22 • Edited

Puppeteer: page.screenshot()
Playwright: page.screenshot()
Cypress: cy.screenshot()

Interesting use of Web APIs regardless

CanvasRenderingContext2D.drawImage()
HTMLCanvasElement.toDataURL()

Jasmin Virdi • Apr 12 '22

Thanks for mentioning 🙌

Racheal Walker • Apr 10 '22

hey,
i like your approach but you can also try doing this.

Upload html-file(s) Select files from Computer, Google Drive, Dropbox, URL or by dragging it on the page.
Choose "to jpg" Choose jpg or any other format you need as a result (more than 200 formats supported)
Download your jpg.

Jasmin Virdi • Apr 12 '22

You can definitely try this way but I want to cover the case where you have to do it via Code.

peerreynders • Apr 11 '22

That's the Google featured snippet you get when you search "How to turn HTML webpage into an Image?" (i.e. the title of the article) - which isn''t that useful without the website where it came from.

Jasmin Virdi • Apr 12 '22

Definitely, you can do this manually. My intention was to state an approach when you have to automate it or do it via code without using any library.👍