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>
Top comments (0)