使用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、页面头部不能使用,否则截出来的图是模糊的。解决的方案可以参考这里 :http://download.csdn.net/detail/qq408896436/9750648
这样做之后,截取的图片会比原图的清晰度会差那么一点,如下图 :
使用html2Canvas实现截图功能_第1张图片
(左边是原图, 中间是处理过的截图,右边是没处理过的截图)
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


你可能感兴趣的:(javascript)