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(http://www.freakyjolly.com/wp-content/uploads/2017/08/cropped-fjlogo2.png);

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.

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
adminJoe Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Joe
Guest
Joe

Is there a good way to do this for multiple image pages? Maybe using JSPDF with it?