html2canvas 在 IOS 微信中绘图白屏黑屏问题

本文链接：https://blog.csdn.net/u010905433/article/details/123410110

项目中需要在微信中生成海报图，用户长按海报图后可以将图片发送给微信好友或保存到本地；

海报图在前端使用html2canvas 1.0.0-rc5生成，布局先使用一个高度为0并添加overflow: hidden的div作为外部容器，并将需要绘制的dom作为子元素放进去，实现绘制dom对用户不可见，大致代码如下：

<div style="height: 0;overflow: hidden;">
  <div ref="canvasDiv">
    待绘图的DOM
  </div>
</div>

html2canvas代码如下：

html2canvas(this.$refs.canvasDiv, {
  imageTimeout: 0, 
  allowTaint: true, 
  useCORS: true
}).then((canvas) => {
  let png = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
  this.img = png.src
})

问题

上面的代码，在PC和安卓上运行没有任何问题，但是在IOS上，会出现绘制的图片白屏；

解决：

1：先替换html2canvas版本为1.0.0-rc3
2：在使用html2canvas方法绘图前，添加 window.scrollTo(5, 0)

window.scrollTo(5, 0)
html2canvas(this.$refs.canvasDiv, {
  imageTimeout: 0, 
  allowTaint: true, 
  useCORS: true,
  x: 0, // 因为上面使用window.scrollTo方法将页面向右滚动了5px，所以需要通过该设置来防止生成的图片左边出现白边
}).then((canvas) => {
  let png = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
  this.img = png.src
})