html2canvas使用记录

该插件，我使用的是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);
    });