js截屏

---

使用Html2canvas截屏

---

下载Html2canvas

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面截图下来。
换句话说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像。
这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

下面举个简单例子

完整html代码如下

    
        
        
        
    
    
        

            
第1行
            
第2行
            
第3行
            
第4行
        
        
        
    

看下效果

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

---