html2canvas使用心得

近两年做了几次微信H5活动的开发，为了达到传播分享的效果，通常最终都需要生成个性化的图片，供用户长按保存分享，在这里就把自己的一些使用心得记录下来，供其他小伙伴借鉴。

这里备注一下，我目前用的是  html2canvas 0.5.0-beta4 版本，这篇文章也以它为例，先贴一下代码

 

　　　 
      let canvas = document.createElement('canvas');
      let cardBox = document.querySelector("#imgBox");
      let w=cardBox.offsetWidth;
      let h=cardBox.offsetHeight;
      let scale=3;
      canvas.width = w*scale;
      canvas.height = h*scale;
      canvas.style.width=w+"px";
      canvas.style.height=h+"px";
      let context = canvas.getContext("2d");
      context.scale(scale,scale);
      let rect = cardBox.getBoundingClientRect();//获取元素相对于视察的偏移量
      context.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
      html2canvas(cardBox, {
          canvas: canvas,
          scale: scale,
          dpi:1,
          width:w,
          height:h,
      }).then((canvas)=> {
          var dataUrl = canvas.toDataURL();
　　　　　　//这个dataUrl就是生成图片的base64编码了
      });

　　

1.图片模糊的问题

　　这个问题很常见，造成的原因也是有多个的，首先就是上图代码中声明的 scale 参数，通过这个参数控制画布的缩放，可以增加图片的清晰度，但是太高也会有问题，会导致图片太大，以及超过屏幕分辨率而出现色彩斑点，因此找到一个比较合适的比例就好；

　　另一个常见的原因就是在需要生成为图片的html中，一些原本就是图片的元素，最好使用img标签去加载他，而不是用作背景图。

 

2.图片跨域

　　我们在生成的图片中经常会用到当前用户的头像，这个头像是微信那边返回的一个url，如果直接把他通过img标签放在html里面，会发现最终生成的图片没有头像，这是因为canvas的浏览器安全协议阻止了这个行为，这个目前没找到办法在前端去解决，我一般是让后端讲这个图片转为base64以后传给我，这样就像是本地资源一样，便不会有跨域问题了。

 

3.图片中的元素位置发生偏移

　　经过一些对比，我发现生成的图片中一些元素相对于html的位置发生了细小的偏移，后来在网上找到了解决方法

　let rect = cardBox.getBoundingClientRect();//获取元素相对于视察的偏移量
  context.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位

　　就是通过以上两行代码，在canvas中绘制html元素时，会纠正元素的偏移问题。

 

4.如何实现长按保存

　　因为微信浏览器中的图片标签，经过长按以后会触发浏览器的事件，弹出保存和分享等菜单栏，因此在微信中只要你将最终生成的图片放在手指可以操作的地方，然后提示用户长按就好。不过通常我是讲生成后的图片加载为img后通过相对定位覆盖在需要生成为图片的那个div上面，最好透明度设置为0，这样生成的那一瞬间也没有突然变化的效果，用户体验会更好一些，用户对着那个div长按，实际则是按到了覆盖在上面的img，微信浏览器就会弹出菜单栏，用户便可以保存或者分享了。