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上下。
6397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
