发布时间：2023-05-05 16:36:23 发布者：文昌文城莱奥网络技术工作室 浏览次数：812
<!DOCTYPE html>
<html>
<head>
<title>Save Webpage as Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
</head>
<body>
<div id="myElement">
1, World!</h1>
<p>This is a sample paragraph.</p>
<!-- <img src="image2.png" alt="Sample Image"> -->
</div>
<button onclick="saveAsImage()">Save as Image</button>
<script src="/static/admin/vendor/js/jquery.js"></script>
<script>
function saveAsImage() {
// 获取要保存为图片的HTML元素
var element = document.getElementById("myElement");
// 使用dom-to-image库将HTML元素转换为图片
domtoimage.toPng(element)
.then(function(dataUrl) {
// 创建一个a元素，用于下载图片
var link = document.createElement("a");
link.download = "666.png";
link.href = dataUrl;
// 将a元素添加到文档中，并模拟点击下载链接
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(function(error) {
console.error('oops, something went wrong!', error);
});
}
// 在移动设备上，需要将按钮的click事件替换为touchend事件
if ('ontouchstart' in window) {
var button = document.querySelector('button');
button.addEventListener('touchend', saveAsImage);
button.addEventListener('click', function(event) {
event.preventDefault();
});
}
</script>
</body>
</html>