<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/html2canvas.min.js"></script>
</head><body>
<div id="view" style="background:url(/img/simple.jpg) 50%; width: 500px; height: 500px;">
<input type="button" value="截屏" οnclick="testScreen()">
</div>
<script>
function testScreen() {
console.log('test');
html2canvas(document.getElementById('view'), {
useCORS: true
}).then((canvas) => {
// 返回一个canvas 对象
document.body.appendChild(canvas);
// 转化成 dataurL
let canvasImg = canvas.toDataURL("image/png");
downLoadFile("simple", canvasImg);
})
}function downLoadFile(fileName, canvasImg) {
//创建一个a标签
var a = document.createElement('a')
//指定下载文件名称
a.href = canvasImg;
a.download = fileName
//a 标签 需要点击触发。所以强制给他分派一个点击事件
//创建一个鼠标事件
let event = document.createEvent("MouseEvents")
// 初始化鼠标事件
event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
// 指定元素对象触发事件
a.dispatchEvent(event)
}
</script>
</body></html>
html2canvas截图并下载
最新推荐文章于 2024-07-02 10:13:04 发布