HTML CSS Javascript jQuery AJAX PHP Java MORE
Need a Website Or Web Application Contact : +91 9437911966 (Whatsapp) Note: Paid Service

How to convert a HTML div element into an Image using javascript

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