一、html2canvas
Screenshots with JavaScript
官网地址：http://html2canvas.hertzen.com/
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。·
它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。
html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片
使用案例：
<!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="../plugins/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
<p>asdfasdfasdf</p>
<!-- <img src="http://yawz.qianlekh.com/file/logo/166.jpg"> -->
<p>这是一张跨域图片</p>
<img src="http://p7.qhimg.com/t01ceede0272d4b5a8b.png" alt="来个跨区的图片" style="width:50px;height:50px;">
</div>
<hr>
<script>
html2canvas(document.querySelector("#capture"),{
useCORS: true // 允许加载跨域图片 ，同时需要对应服务器设置图片跨域
}).then(canvas => {
document.body.appendChild(canvas)
});
</script>
</body>
</html>
展示结果：
二、滚动截屏
将目标区域Dom克隆，并设置克隆Dom的狂傲，截图克隆区域即可
const targetDom = document.querySelector("#admin")
const copyDom = targetDom.cloneNode(true)
copyDom.style.width = targetDom.scrollWidth + 'px'
copyDom.style.height = targetDom.scrollHeight + 'px'
document.body.appendChild(copyDom)
html2canvas(copyDom, {
allowTaint: false,
useCORS: true,
height: targetDom.scrollHeight,
width: targetDom.scrollWidth
}).then(canvas => {
// canvas
});
三、截屏区域有跨域图片
// allowTaint: false 不允许跨域图片污染画布
// useCORS: true 允许加载跨域图片
四、下载图片
// 插入之前canvas下
html2canvas(copyDom, {
allowTaint: false,
useCORS: true,
height: targetDom.scrollHeight,
width: targetDom.scrollWidth
}).then(canvas => {
this.printShow = true
copyDom.parentNode.removeChild(copyDom)
// console.log(canvas.style.width)
canvas.style.width = parseFloat(canvas.style.width) * 0.8 + 'px'
canvas.style.height = parseFloat(canvas.style.height) * 0.8 + 'px'
setTimeout(() => {
const container = document.querySelector('#view')
while (container.hasChildNodes()) {
container.removeChild(container.firstChild)
}
// toImage
const dataImg = new Image()
dataImg.src = canvas.toDataURL('image/png')
document.querySelector('#view').appendChild(dataImg)
const alink = document.createElement("a");
alink.href = dataImg.src;
alink.download = "testImg.jpg";
alink.click();
}, 0)
});
更多：