Convert HTML Document into Image JPG PNG from Canvas

html2canvas is a powerful library to convert HTML into a canvas. Canvas created can be used to create PDF or we can simply append in the document somewhere required. Here we are going to simply convert HTML document or any element into a canvas which we later convert into Image of JPG or PNG type.

Let’s start…

Step 1) Include HTML2Canvas  Library in your project in the head section.


Step 2) Call html2canvas method which will take a section of HTML element or full document you want to convert into Image.

Find working Demo link

Update: Solution: How to show images in Canvas or Image Created using HTML2Canvas

We need to add an option and change image URL’s

Step 1) Add option “allowTaint:true“. So the code will look like

Step 2) Change Image URL to same domain from which we are creating Canvas/Image. for example

Replace This

background-image: url(;

To This

background-image: url(/wp-content/uploads/2017/08/cropped-fjlogo2.png);

After these two steps you will be able to see Images in Canvas/ Image created using html2canvas library.

3 thoughts on “Convert HTML Document into Image JPG PNG from Canvas”

  1. is it possible to replace the name of the image (html_image.jpg) by a variable?
    something like:

    var imagename = document.getElementById(‘naamafzender’).value = “‘ + afzender + ‘.jpg”; = imagename;

    Thanks for the great script!
    Best regards,

Leave a Reply

Your email address will not be published. Required fields are marked *