html2canvas在iphone ios15以上出现了罢工,只跳转或者生成的图片是空白

前端 2021-10-29

最近刚上线一个新的项目,在商品详情和邀请好友页面有处理到html2canvas生成海报或者商品推广图,然后在2021年苹果升级的ios15系统里生成图片失败了,要么就是空白的,要么就是自动把页面刷新了,报错了。

然后在github的html2canvas问题里面有人提出了这个问题,并给出了解决方案。其实很简单就是在你的canvas海报这个大的元素里面不要使用font-family的某些字体的引用,如:-apple-system,arial等。

但也不能不用字体对吧,我本身全局引用的是这个:font-family:-apple-system,PingFang SC,Helvetica,arial,sans-serif;

然后我通过优先级把html2canvas里面的标签元素都引用了这个,并加上了!important优先级,让标签元素只使用这些字体:font-family: PingFang SC,Helvetica,sans-serif !important;

然后成功了。

下列这是官方有人提出的问题和解决方法提示:

4618673-4ff7b13c0e73885e.jpg

4618673-61457b0ae1184782.jpg

下列展示我自己的方式和效果:

1635472363(1).jpg
hb.jpg