05.02.2024 в 14:28
Иван Белов
Преобразуйте все данные div в изображение и сохраните его в каталоге с помощью JavaScript ft html2canvas.js.
- О html2canvas: https://html2canvas.hertzen.com/
Скопируйте JavaScript CDN:
<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>Смотреть код здесь:
<!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>
