safari的带二维码的图片无法下载

序

说起 h5 页面实现分享，这里面一套成熟的方案无非是预先设计好一个图片作为一个浮层盖在上面，但是假设我们的分享链接需要带一点信息呢，比如作为一个票据实现，可以扫出信息，那么这样就有了一个思路 – 使用 html2canvas
把当前页面变成一个图片，用来显示！

听起来很美好也很好用，作为一个用过 html2canvas 多次老司机并不觉的这有什么困难的，但是万万没想到，这次居然翻车了！！

ios 于 ios 11 开始为 safari 新增了一个功能，这一功能可以在 safari 中长按图片的时候识别二维码，并通过二维码直接打开网址。

但是这个功能有一个bug：当长按图片包含的二维码，但其并不是一个链接的时候（比如 “baidu” 这样一个字符串的时候），那么将无法下载，截止到 ios 12.1.4 为止，这一问题尚未被修复

但是由于 3d touch 并未使用这一功能，所以并不受此功能影响。

这一次生成了一张图片大致可以理解为下面这样：

这样一个横简单的图片差不多没几分钟就搞好了，但是很快测试反馈了一个问题，在safari下是没有办法下载的，这怎么可能，所以我试着检测了一下：

安卓：正常，所有浏览器可以正常下载
ios chrome：正常
ios 微信：正常
ios 企业微信：正常
ios QQ：正常
ios safari：长按下载，点击后无效（3d touch 上滑，并点击下载，正常）

突然陷入僵局，这似乎不是我代码的问题那么有什么可能么？是图片太大？

随后尝试了不同尺寸的图片都不行，那么问题是什么？

我试着使用 safari 浏览器打开了此前制作的一个项目的分享页面，长按，下载，一气呵成。

是的！没有任何问题。

这时在旁边看着我鼓捣的同事说了一句，为什么你这个长按显示的内容和你这个demo上显示的不一样

这个时候我忽然发现了问题，对确实不一样！看下面你的视频：

经过一番排查终于发现了，原来是二维码的内容导致的！

本文标题：safari的带二维码的图片无法下载

作者授权：除特别说明外，本文由 icepro 原创编译并授权刊载发布。