素材巴巴 > 程序开发 >

微信H5 html2canvas截图在IOS13.4失效问题

程序开发 2023-09-20 13:39:16

微信H5商城持续维护,上周终于把团购搞完并顺利上线了。
还记此前使用html2canvas生成分享图,也时不时的出现bug,本周商城很多用户反馈:分享图生成不了!!!
由于团购上线紧急,反馈用户也比较少,这个问题便稍稍搁置了,团购搞完了,这个问题也该提上议程了。

分析问题:

从用户处了解到全是IOS问题,找了半天没发现问题所在,加上公司同事手机都是Iphone,也都可以正常截图啊,无任何问题!!!

看了看自己手机版本13.3.4,设置也有提示更新13.4.1,好家伙那更新下系统,再一探究竟,同时问了下出现问题的用户手机系统版本,竟然也是13.4.1,ok,那问题所在点基本是确定了,接下来就解决问题!

解决问题:

打开微信调试助手,连接手机进行移动端调试,点击分享图,静待出现报错原因,嘿嘿
我擦勒,竟然没报错!!!没有任何问题,可就是不能生成图片!看来还得继续寻找问题了。。。

既然用的html2canvas插件,那咱们就去官方瞅瞅呢
果然,在官方issues还真有提关于微信H5不能生成图片的问题,最终找到问题如下:
Promise documentClone.fonts.ready not resolve in file document-cloner.ts
也就是说当前版本中已不存在这部分代码了
使用上个版本即可解决问题!

附上issue链接地址: https://github.com/niklasvh/html2canvas/issues/2205

最新版本:“html2canvas”: “1.0.0-rc.5” (×)
上一版本:“html2canvas”: “1.0.0-rc.4” (√)

切换版本,真机测试,完美解决!nice

总结:

遇到问题不要方,咱一步一步来,特别是前端兼容性问题,指不定前面会有什么问题等着你,只要心态放稳,分析问题、锁定问题、解决问题三步走,就一定能完美解决!
最后:干就完了!

本人撸的H5项目,看效果的可以参考:(仅微信内访问)
日本跨境电商 :http://h5mall.beautyclass.shop/home?channel=h5mall&uid=5

H5商城已停止迭代,目前主研小程序,小程序分享海报问题大家可以交流~~
附上小程序码:
在这里插入图片描述


标签:

上一篇: 在Eclipse中开发angularjs 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。