使用html2Canvas实现截图功能

 

通过JS就能截屏，这是Html2canvas为用户提供的一个便捷的神器，通过对DOM元素的信息提取渲染

使用例子 ：

 

html2canvas($("#bg"), {
 onrendered: function (canvas) {
     var url = canvas.toDataURL(); //base64数据
     var image = new Image();
     image.src = url;
     document.body.innerHTML = '';
     document.body.appendChild(image);
     document.title = '整个页面已经是图片了~~';
   }
});

 

使用的注意事项 ：
1、页面头部不能使用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，否则截出来的图是模糊的。解决的方案可以参考这里 ：http://download.csdn.net/detail/qq408896436/9750648
这样做之后，截取的图片会比原图的清晰度会差那么一点，如下图 ：

（左边是原图， 中间是处理过的截图，右边是没处理过的截图）
2、设置背景的时候，background-size 不能设置为cover或者其它，必须有一个值。否则背景无法截出来
3、移动端的页面最好使用rem来制作
4、不支持iframe截图
5、不支持跨域图片，若图片需要跨域，则只能转成base64
6、部分浏览器上不支持SVG图片
7、不支持Flash
8、不支持IE8以下的浏览器
9、需要在服务器下观看效果
10、截取的内容不能为display：none

例子下载地址 ：http://download.csdn.net/detail/qq408896436/9711501