js截屏
2016-08-04 本文已影响569人
AdrianRD
使用Html2canvas截屏
Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。
换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。
这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。
下面举个简单例子
完整html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/html2canvas.min.js"></script>
</head>
<body>
<div id="box" style="margin: 20px; padding: 10px; background: orange;">
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
</div>
<script type="text/javascript">
function AJRD_printDom(id){
html2canvas(document.getElementById(id), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
var dataUrl = canvas.toDataURL(); //生成base64图片数据
var oPop = window.open(dataUrl,"","width=1000, height=500, top=100, left=0");
}
});
}
onload=function(){
AJRD_printDom('box');
}
</script>
</body>
</html>
看下效果
js截屏
我们可以看到id为box的div被打印成了一张图片
再来看看截屏函数
function AJRD_printDom(id){
html2canvas(document.getElementById(id), {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
var dataUrl = canvas.toDataURL(); //生成base64图片数据
var oPop = window.open(dataUrl,"","width=1000, height=500, top=100, left=0");
}
});
}
你会发现这个截屏并不是真正意义上的截屏，输入参数并不是像素宽高，而是一个dom节点。
html2canvas将这个dom节点再次渲染生成一张图片。当拿到图片之后，这里是将它在新窗口中显示出来，你也可以将它保存到任何地方！
