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

本文主要是介绍html2canvas 在 IOS 微信中绘图白屏黑屏问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

海报图在前端使用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
})

总结：

这个问题个人觉得是一个很奇葩的问题，为什么通过设置滚动可以修复这个BUG也完全不清楚，网络上看各位大佬解决都是将滚动设置为0，而我这儿却是需要设置为非0

如果有哪位大佬知道原因，还请留言告知一下

这篇关于html2canvas 在 IOS 微信中绘图白屏黑屏问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---