Convert entire div data into image and save it into directory using JavaScript ft html2canvas.js
Published: 2024-02-04 17:44:27


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/](https://sh20raj.github.io/Tutorialsdiv/html-to-canvas/)

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

  

About html2canvas :- [https://html2canvas.hertzen.com/](https://html2canvas.hertzen.com/)

GItHub :- [https://github.com/niklasvh/html2canvas](https://github.com/niklasvh/html2canvas)

  

Copy the JavaScript CDN :-

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


Copy The Code :-  

```html

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

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