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 微信中绘图白屏黑屏问题相关推荐

html2canvas ios出问题,html2canvas 在 IOS 微信中绘图白屏黑屏问题
项目中需要在微信中生成海报图,用户长按海报图后可以将图片发送给微信好友或保存到本地: 海报图在前端使用html2canvas 1.0.0-rc5生成,布局先使用一个高度为0并添加overflow: h ...
html ios 视频播放不了,html中的video标签在ios微信中无法播放的解决方法之一
html中的video标签在ios微信中无法播放的解决方法之一发布时间:2020-07-16 22:41:04 来源:51CTO 阅读:2652 作者:lixiaoyu1223 最近在做一个微信企业 ...
linux中白屏变黑屏咋变,解决 APP启动白屏黑屏问题
闪屏页简介闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...
微信小程序 video标签 ios不能播放视频或视频黑屏
首先用ios的浏览器打开视频的链接,看通过浏览器是否可以播放,如果可以则说明视频没问题. 注意视频的编码格式,再有就是,如果视频是直接存放在服务器上的,注意给出的视频路径不要存在中文,存在中文在ios ...
苹果开机是白苹果黑屏_这是苹果应如何回应史诗般的1984年诱饵
苹果开机是白苹果黑屏 As you are reading this, you probably know about Epic Game's lawsuit filing against Apple ...
解决 APP启动白屏黑屏问题
闪屏页简介闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...
完美世界手游服务器维护中,完美世界手游黑屏闪退解决办法玩不了怎么办
完美世界手游玩不了怎么办?黑屏闪退怎么解决?游戏中很多玩家玩的时候出现了黑屏闪退的情况,下面由第一手游网小编为大家带来黑屏闪退解决办法吧! 完美世界手游黑屏闪退解决办法 1.内存不足造成游戏黑屏,很 ...
android splash白屏_解决Splash白屏黑屏问题
当系统启动一个App时,zygote进程会首先创建一个新的进程去运行这个App,但是进程的创建是需要时间的,在创建完成之前,界面是呈现假死状态的,这极大地降低了用户体验,Android需要及时做出反馈 ...
android应用白屏闪退,解决 APP启动白屏黑屏问题
闪屏页简介闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...

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

问题

解决：

总结：

html2canvas 在 IOS 微信中绘图白屏黑屏问题相关推荐

最新文章

热门文章