html2canvas可以通过纯JS对浏览器网页进行截屏，但截图的精确度还有待提高
官网： http://html2canvas.hertzen.com/
gitHub: https://github.com/niklasvh/html2canvas
引用 ： <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
主要用法是：
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
// console.log(canvas.toDataURL())；
},
// width: 300,
// height: 300
});
这是一个demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<style>
#view{
border: 1px solid red;
background-image: url(image/c05ddd91c8803ea8306f02cf4a10fcdb.png);
background-size: 100%;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="view">
<input type="button" value="截图" onclick="takePhoto()">
</div>
</body>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript">
function takePhoto() {
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
console.log(canvas.toDataURL());//这是截图的base64
document.body.appendChild(canvas);//这是有截图的画布
},
});
}
</script>
</html>
运行之后：
点击截图按钮：
下面出现的就是截图，不过不太清楚。