Convert DIV element as image and download them when click the button - javascript.

Mayank October 04, 2022
Convert DIV element as image and download them when click the button - javascript.

In this article I’m going to explain you one the most interesting and useful tutorial, that is download the HTML DIV element as image by using of javascript and jquery.

HTML CODE : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootStyle.css">
    <title>Download DIV Element as Image</title>
</head>
<body>
    <div class="container" id="imgSection">
        <h1 class="text-center">Computer</h1>
        <div class="row row-cols-1 row-cols-md-2 g-4">
            <div class="col">
                <div class="card">
                    <img src="img2.jpg" class="card-img-top" alt="computer image not found">
                    <div class="card-body" style="background-color:hsl(236, 98%, 75%); color: white;">
                        <h5 class="card-title">Computer - 1</h5>
                        <p class="card-text">This is a longer card with supporting text below as a natural
                            lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="img2.jpg" class="card-img-top" alt="computer image not found">
                    <div class="card-body" style="background-color:#73c5f5; color: white;">
                        <h5 class="card-title">Computer - 2</h5>
                        <p class="card-text">This is a longer card with supporting text below as a natural
                            lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col my-1 mb-0 text-center">
        <button type="button" class="btn btn-primary ms-3 my-3 clickbtn" id="download">Download <b>DIV</b>
            Element</button>
    </div>

    <script src="bootJs.js"></script>
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="logic.js"></script>
    <script src="logic2.js"></script>
</body>

</html>

JAVASCRIPT CODE (FILE - 1) : 

$('document').ready(function () {
    $("#imgload").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imgshow').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
});

JAVASCRIPT CODE (FILE - 2) : 

document.getElementById("download").addEventListener("click", function () {
    html2canvas(document.getElementById("imgSection"),
        {
            allowTaint: true,
            useCORS: true
        }).then(function (canvas) {
            var anchorTag = document.createElement("a");
            document.body.appendChild(anchorTag);
            anchorTag.download = "file.jpg";
            anchorTag.href = canvas.toDataURL();
            anchorTag.target = '_blank';
            anchorTag.click();
        })
});

Run Code : Run

Download Code : Download

Tags
Mayank

Posted by Mayank

Post a Comment

0 Comments

Enter Your Comment