Name: Convert entire div data into image and save it into directory using JavaScript ft html2canvas.js
Rating: 1.3 (3065 reviews)
Author: sh20raj

Convert entire div data into image and save it into directory using JavaScript ft html2canvas.js

GET MORE + DEMO :- https://codexdindia.blogspot.com/2021/05/convert-entire-div-data-into-image-and-save-it-into-directory-using-JavaScript-ft-htmltocanvasjs.html

See Demo :- https://sh20raj.github.io/Tutorialsdiv/html-to-canvas/

See Codes :- https://replit.com/@SH20RAJ/Tutorials#html-to-canvas/index.html

About html2canvas :- https://html2canvas.hertzen.com/

GItHub :- https://github.com/niklasvh/html2canvas

Copy the JavaScript CDN :-

<script src="https://cdn.jsdelivr.net/npm/html2canvas/dist/html2canvas.min.js"></script>

Copy The Code :-


<script> 
function doCapture() {     
window.scrollTo(0, 0);     // Convert the div to image(canvas)     html2canvas(document.getElementById("capture")).then(function(canvas) {
// Get the image data as JPEG and 0.9 quality (0.0 - 1.0)         var imgdata = canvas.toDataURL("image/jpeg", 1);         console.log(imgdata);         document.querySelector('#captured').src = imgdata;
 }); } </script>

See Code Here :-

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Capture Div into Canvas</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <script src="https://cdn.jsdelivr.net/gh/CDNSFree/autotopbar@main/autotopbar.js"></script>
    <div class="container">
        <br><header><h1>YouTube Thumbnail Creator</h1></header>


        <script src="https://cdn.jsdelivr.net/npm/html2canvas/dist/html2canvas.min.js">
        </script>
        <script>
            function doCapture() {
    window.scrollTo(0, 0);
    // Convert the div to image (canvas)
    html2canvas(document.getElementById("capture")).then(function (canvas) {
        // Get the image data as JPEG and 0.9 quality (0.0 - 1.0)
        var imgdata = canvas.toDataURL("image/jpeg", 1);
        console.log(imgdata);
        document.querySelector('#captured').src = imgdata;
    });
}

        </script>

        <button class="btn btn-outline-info" onclick="doCapture();">Capture</button>
    <br><br>

    <div id="capture">
      <h1>Capture Div into Canvas</h1>
    <img src="../logo.png" alt="" srcset="">
    <br><br><br>
   <span> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus rerum accusamus odio repellendus, repudiandae quas optio cum vitae delectus nulla doloribus, labore nihil fuga ut consequuntur illo sint quos explicabo? </span>
   <div class="foot btn btn-warning">
     JavaScript Tutorials
   </div>
        </div>


    <br>
    <hr>
   <h2>Captured Image ...</h2><br>
    <img src="../logo.png" alt="" id="captured"> 

  </div>



  <script src="../analytics.js"></script>

</body>
</html>