html2canvas使用心得

MIKUScallion 2020-06-11

近两年做了几次微信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,微信浏览器就会弹出菜单栏,用户便可以保存或者分享了。

相关推荐