<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web页面转换为图片并下载</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.0.0/html2canvas.min.js"></script> -->
<script async src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
</head>
<body>
<button onclick="downloadImage()">下载图片</button>
<canvas id="canvas"></canvas>
<script>
function downloadImage() {
let html = document.documentElement;
html2canvas(html).then(function(canvas) {
let dataURL = canvas.toDataURL('image/png');
console.log(dataURL)
let img = new Image();
img.src = dataURL;
img.onload = function() {
let link = document.createElement('a');
link.href = dataURL;
link.download = 'webpage.png';
link.click();
};
});
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通