要实现这个功能就必须要介绍一款特别好用的插件: html2canvas
他的用法也特别傻瓜式只需要两行代码就可以实现网页截屏的功能
html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);
});
下面看例子
这里我们的body标签高度是3023, 浏览器肯定是已经出现滚动条了, 我们测试的就是, 是否能实现网页的完整截屏
<html> <head><style>.box {width: 600px;height: 3000px;background-color: pink;}</style> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script> </head> <body> <div class='box'></div><input type="button" value="button"> 生成界面如下： </body> <script type="text/javascript" > document.querySelector('input').on("click", function(event) { event.preventDefault(); html2canvas(document.body).then(function(canvas) {var dataUrl = canvas.toDataURL();var newImg = document.createElement("img");newImg.src = dataUrl;document.body.appendChild(newImg);}); }); </script>
</html>
实验证明, 完全可以实现网页完整截屏, 此外, 因为这款插件的原理是遍历dom, 因此, 除了可以把body当做参数传入之外, 还可以将你想截取的标签当做参数传入进去, 比如, 当你的body的高度设置100%时, 有的元素因为超出了body的高度而发现只能截取到当前窗口的图片时, 不妨试一下把你需要截取的标签当做参数传入到html2canvas()里, 此外, 这个插件还有许多方便的功能, 有兴趣的可以去官网学习一下,组件化开发中也可以用
附上API传送门: http://html2canvas.hertzen.com/documentation
