Convert HTML Document into Image JPG PNG from Canvas

5 Comments / By / Updated on April 30, 2022

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 in the html2canvas(). So the code will look like

		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.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

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

  3. Ronald Chaudron

    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”;
    link.download = imagename;

    Thanks for the great script!
    Best regards,
    Ronald

    Reply

Leave a Comment

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