Skip to main content

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

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>


Captured Image ...



Labels:

Comments

Post a Comment

Random Posts