Breaking News: Grepper is joining You.com. Read the official announcement!

save image with div content in js using javascript

Unusual Unicorn answered on September 20, 2023 Popularity 4/10 Helpfulness 4/10

answer save image with div content in js using javascript

save image with div content in js using javascript

Comment

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

Popularity 4/10 Helpfulness 4/10 Language javascript

Source: www.studentstutorial.com

Tags: javascript save-image using

Link to this answer
Share Copy Link

Contributed on Sep 20 2023

Unusual Unicorn

0 Answers Avg Quality 2/10

save image with div content in js using javascript

Contents

More Related Answers

save image with div content in js using javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.