浏览器兼容:火狐不支持webq格式图片

记一次解决浏览器兼容的bug:

昨天下午,测试反馈了一个问题:pc端微信复制过来的图片有了防盗链,不能正常显示。

然后就开始了苦逼的解bug流程。问题描述很明白,就是防盗链的事,上网搜了很久,终于在一个小角落了发现了解决方法。

方法转载如下:

  1. 图片地址前缀加上http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=
  2. 在head中加上<meta name="referrer" content="never">
  3. 反向代理mmbiz.qpic.cn

这里我采用了第二种方式,毕竟处理起来简单。而且就目前来看,是ok的。其他两种方式没测试,具体效果就不知道了。

本以为问题就这么解决了,能正常下班回家了,又有问题了:现在不提示防盗链了,新从微信粘贴过来的文章图片在各个浏览器都能正常显示,唯独以往制作的文章图片提示找不到,不能正常显示。

所以,昨晚加班了,可是问题还是没解决,不清楚是什么问题,后来思路也不清晰了,就下班了。今天又来看了看,终于解决了,特此记录一下。

现在说起来肯定是特别简单了,但有时候就是想不明白那个点,怎么做都不行。来简短说一下解决流程吧。

首先,我对比了火狐和谷歌下图片的链接地址,以为会不会是链接地址被改了,结果一模一样,排除。。

后来,偶然瞅了一眼图片格式webq,什么东东,百度一下,简言之就是谷歌想一统jpg,png等图片格式搞得新的图片格式。

都到这了,肯定要往兼容上考虑,看看火狐是否支持这个格式。后来一搜,怎么还有谷歌和火狐的爱恨情仇呢。不过,结果是:不支持。。。

这是火狐社区的buglist:https://bugzilla.mozilla.org/show_bug.cgi?id=1294490 ,貌似是又进展但还没搞定,管他呢 。博客园这位仁兄也提到了这个问题并给出了样例:http://www.cnblogs.com/yi-mi-yangguang/p/6536488.html。

说了半天,给个图片url看看:http://mmbiz.qpic.cn/mmbiz/AaDY9kH23GuS80bFrE1aGHyiaSAZGicoic7v2ylpPXfcXfErpLnqVfYblL3KuD2bfGnWKRIIbfRT6nFdBqdvOEiczQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5

看起来,格式貌似是tp=webp影响了,去掉试试,还真是!

然后就简单了,把数据中所有的url全部取代了这个参数就OK了,问题就到此解决了,不知道正不正确不知道,能用就行。

后来没事试了一下,发现把参数全部扔掉也能获取到图片,也可以搞一搞。

PS:这种处理方式,我是直接舍弃掉了用谷歌的webq的图片格式,其实更理想的做法是通过js判断浏览器是否支持webq格式,然后再处理吧。不过因为业务逻辑有点不好处理,就没有深究了。有时间可以详细看看,可以直接扒一扒微信的文章看看是他们是怎么处理的。

 

你可能感兴趣的