canvas绘制框架,html2canvas使用技巧


最近做h5网页,有个功能是用户能长按页面保存为图片,在我们理解就是网页要生成图片然后再让用户长按保存,然后就发现了html2canvas这个框架了,效果挺不错了,但是有几个坑说一下(用的最新版):

html2canvas($("#pop_predict_img_container")[0],
{scale:2,logging:false,useCORS:true}).then(function(canvas) { 
var dataUrl = canvas.toDataURL(); $("#predict_img").attr("src",dataUrl).removeClass("hide"); });

scale:是用来调整生成图片屏幕分辨率的,其实设置成1再iphone上生成的图片清晰度没啥问题,但是再有些android手机上就很模糊,所以为了兼顾这部分手机就把scale设置成了2;

useCROS:这个参数是用来设置是否允许使用跨域的图片进行访问的,好像默认就是true,不太记得了;

logging:这个是日志打印的,实际上线当然不需要了,所以就false;

还有一点要说明下,再使用微信的头像的时候生成的图片老是会把头像丢失,其他服务器的图片都可以,尼玛就是想不通,后来就先转成base64放到img标签里面生成图片,就解决了这个问题;

此外,说个canvas将img转base64的问题,如下:

 function getBase64Image(imgurl) { 
          var img = new Image(); 	
          img.src = imgurl; 	
          img.setAttribute('crossOrigin', 'anonymous'); 	
          img.onload=function(){
             var canvas = document.createElement("canvas"); 	     
             canvas.width = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小 	     
             canvas.height = 300;//这个设置不能丢,否者会成为canvas默认的300*150的大小	    
             var ctx = canvas.getContext("2d");	    
             ctx.drawImage(img, 0, 0, 300, 300);	    
             var dataURL = canvas.toDataURL("image/png"); 	    
             console.log(dataURL);	    
             $("#img").attr("src",dataURL);
	     html2img();
 	}}

也是为了解决canvas转base64图片大小不对的问题!

声明:三戒说天下|三戒日记|三戒随笔-柳三戒博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - canvas绘制框架,html2canvas使用技巧


欲带王冠,必承其重。