通过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