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>
运行之后:
点击截图按钮:
下面出现的就是截图,不过不太清楚。
当我们需要对html2canvas.js的文件进行修改的时候,就不能再直接引用链接,需要获取它的插件包
获取html2canvas.js地址:download html2canvas
步骤:
1.打开上面的地址,可以看到下载页面:
2.点击
出现弹框如图:
3.点击external mirror(Alpha),就可以下载到0.5.0-beta4版本的插件包,如图:
补充:刚刚找到了一个更简单的下载html2canvas的方法!链接:https://www.bootcdn.cn/html2canvas/
点进去,就是如图的界面
各种版本号应有尽有,下载源码的话,要到github上下。