In this tutorial, we’ll learn how to convert HTML DOM content on the web page into a JPEG or PNG image. We;ll use html2canvas library to convert the HTML web page into a canvas then convert that canvas into an Image which can be a JPEG or PNG image.
The html2canvas is a powerful library which works really well to do various operation on HTML related to the canvas. We’ll use the html2canvas library methods 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 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.
<script src="assets/js/lib/html2canvas.js"></script></pre> <strong>Step 2)</strong> Call <strong>html2canvas</strong> method which will take a section of HTML element or full document you want to convert into Image. Here we have provided the document.body for full-page, this can also be used with any part of the HTML page using selectors <pre class="wp-block-prismatic-blocks"><code class="language-javascript"> //var container = document.getElementById("image-wrap"); //specific element on page var container = document.body; // full page html2canvas(container).then(function(canvas) { var link = document.createElement("a"); document.body.appendChild(link); link.download = "html_image.png"; link.href = canvas.toDataURL("image/png"); link.target = '_blank'; link.click(); });</pre> Find working <a href="http://freakyjolly.com/demo/Create-Image-From-HTML-Example.html" target="_blank" rel="noopener noreferrer">Demo link</a> <h3></h3> <h3># Issue with showing Images in converted Canvas</h3> If you have any image in the HTML content which you want to get converted into a canvas them image, then that image should be on the same domain. You will not convert image content in the HTML if it links to some other domain. Follow these two steps to convert image as well in the HTML: <strong>Step 1)</strong> Add option <code>"<strong>allowTaint:true</strong>"as the second attribute object inthe html2canvas(). So the code will look likevar container = document.getElementById("htmltoimage");; // full page html2canvas(container,{allowTaint : true}).then(function(canvas) { var link = document.createElement("a"); document.body.appendChild(link); link.download = "html_image.png"; link.href = canvas.toDataURL("image/png"); link.target = '_blank'; link.click(); });
Step 2) Also change Image URL in the HTML content to the same domain from which we are creating Canvas/Image. for example
Replace This
background-image: url(https://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.
Complete HTML source file will have the following code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML TO IMAGE</title> <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <script type="text/javascript"> function downloadimage() { //var container = document.getElementById("image-wrap"); //specific element on page var container = document.getElementById("htmltoimage");; // full page html2canvas(container, { allowTaint: true }).then(function (canvas) { var link = document.createElement("a"); document.body.appendChild(link); link.download = "html_image.jpg"; link.href = canvas.toDataURL(); link.target = '_blank'; link.click(); }); } </script> <style> #htmltoimage { width: 65%; margin: auto; } </style> </head> <body style="text-align:center"> <div id="htmltoimage"> <div class="imgbg"> <img src="https://freakyjolly.com/wp-content/uploads/2017/08/cropped-fjlogo2.png" alt="" srcset=""> </div> <h1>Demo page to show example of "How to Create and Download Image of HTML content in webpage Using html2canvas library". Find tutorial page here <a href="http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/" target="_blank">Here</a></h1>. Just click on button below to download Image of this HTML content which is wrapped in an ID named "htmltoimage". Now I am typing some randome stuff, so that image downloaded will have some content to show blah blah blah :P :D <br> <button onclick="downloadimage()" class="clickbtn">Click To Download Image</button> </div> </body> </html>
Conclusion: Here we quickly discuss how to convert HTML into images using the html2canvas library methods.
Category: Hacks
Leave a Reply