javascript截屏

来源：互联网发布：英语发音软件编辑：程序博客网时间：2024/06/18 04:35

使用Html2canvas截屏

下载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节点再次渲染生成一张图片。当拿到图片之后，这里是将它在新窗口中显示出来，你也可以将它保存到任何地方！

0 0