解决html2canvas在 iOS15系统浏览器中截图后自动刷新页面问题

正文详情 · 687 字

最近利用上班摸鱼时间给网站工具栏目新增了一个微信对话生成器 对着一堆压缩过的js脚本忙活了一天 解决各种不兼容之后(早期使用的是其他人开发共享出来的加密版本性能较差 已经重新开发) 总算在pc端正常使用了 效果还算满意 有兴趣的同学可以看看

微信对话生成器（鉴于以往使用的网络共享版本性能太差 已抛弃网络共享的版本 自己重新开发了一版）

临着快下班想着用手机打开看看效果 居然发现点击没效果 最后发现是jquery的点击事件手机端兼容性问题 解决了之后 终于有反应了 但是又出现一个新问题就是点击了之后没一会页面就自动刷新页面 ，下班后调试好久无果后想着有没有可能是html2canvas.js 的bug 百度了一下果然有不少类似的问题帖子

问题总结

1. 用的html2canvas.js 版本1.0.0-rc.4 用过新的 但是截图网页里面标签会出现位移情况（就是截图效果和网页效果不一致）换了这个版本就可以了 比较懒其他版本没试 有兴趣的也可以试下

2. 测试的手机是ios15+ 百度APP 和Chome手机端 测试点击截图后均会出现自动刷新情况 PC端截图无问题

导致原因

根据网上的信息以及自己的测试情况可以确定 应该是html2canvas 在IOS 15+版本的兼容性bug，出现的契机ios15更新后系统自带了字体，若截图的标签容器未设置字体时就会出现自动刷新网页情况

解决办法

#用户登录可见

1. 标签容器html设置字体覆盖掉默认的系统字体
2. js在调用html2canvas 截图前js操作将对应的截图标签将字体改掉 代码如下：

$("#截图容器").css('font-family', 'PingFangSC-Regular');

---

内容创作不易，转载请务必注明本文来源链接，感谢您的尊重与支持～