Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html

How to turn an HTML webpage into an image

Jasmin Virdi

There are many ways to convert an HTML page into an image such as using a library like dom-to-image, Chrome Headless, or 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.

Converting HTML webpage into an Image by 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.src
    
    function 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 allow 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 not a 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.

    RELATED TAGS

    html

    CONTRIBUTOR

    Jasmin Virdi
    Copyright ©2022 Educative, Inc. All rights reserved
    RELATED COURSES

    View all Courses

    Keep Exploring