该插件,我使用的是1.0.0-rc.4版本,网上提到的旧版本的一些问题,基本都得到了解决,比如手机端截图模糊问题,跨域图片缓存问题,都没有出现
注意
1、对高度高于窗口的内容截图时,要确保滚动条在顶部,否则截取的图片顶部会出现空白
2、在本地测试时候,图片如果使用的是本地图片,需要通过url形式访问此页面,如果直接打开html文件,报错:Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported
//此处dom对象也可使用jquery获取,但要注意jquery获取的是jqery对象obj;obj[0]才是dom对象
var dom = document.getElementById('big_div');
//html2canvas代码
html2canvas(dom,{
/*
允许读取跨域图片
此处设置可读取跨域图片,是给dom中的图片添加了crossorigin="anonymous"属性,作用是使canvas在渲染图片时,http请求头中发送了跨域请求。
网上有朋友说,在dom加载进canvas之前,浏览器会缓存图片信息,包括响应头。
当canvas渲染dom时,img设置了crossorigin="anonymous"属性,但因为一开始页面的图片没有设置crossorigin属性,缓存的图片并没有保存Access-Control-Allow-Origin跨域信息。
此时dom中的img以跨域的方式请求图片时,读取的是缓存中的图片信息,因为获取不到Access-Control-Allow-Origin,所以加载失败。
在页面中,把所有图片加上crossorigin属性,可避免出现该情况。针对已生成缓存的用户,可在图片后追加字符串,生成新的缓存图片。
但我在使用中,暂时没有出现这种情况,只需设置useCORS后就能正常截图
这里记录一下,以后如果碰到可做相应修改
*/
useCORS: true,
//设置canvas宽高,其实没什么用
//设置后,canvas宽高虽然变了,但截取的dom的宽高是不会变的
//相当于截取了dom的一小块儿内容
//在PC端,当我们设置了dom的宽高时,生成的图片是和我们设置的宽高一致的
//在移动端时,dom的宽高无效,插件会自动把生成的图片放大,保证了清晰度
width:200,
height:600,
})
.then(function(canvas){
var img = new Image();
img.setAttribute('src', canvas.toDataURL('image/png'));
$('#big_div').html(img);
});