微信公众号中的图片是如何做到不让下载的呢?

李惟
  • 2.1k

场景:

  1. 使用电脑浏览器(如:chrome)打开一篇公众号文章,比如这篇:

    http://mp.weixin.qq.com/s?__b...

  2. 随便右键下载一张图片到本地,发现只有一个7K的文件(并非图片文件)

  3. 在浏览器调试工具中找到图片资源文件,在新窗口中打开并下载,看到还是一张7K的文件(并非图片文件)

    http://mmbiz.qpic.cn/mmbiz/v6...

请问这个技术是如何实现不让用户在浏览器中下载图片的?

回复
阅读 12.1k
1 个回答
dcjanus
  • 151
✓ 已被采纳

以题主所发链接中标题图片为例,其链接为

http://mmbiz.qpic.cn/mmbiz/v6uP0lGcBZ5xKaBdWPcutsOUQmFxtuBy8rIYMUcoZnxyibweAMv6IDQNgibVibKcqricuer7vlOvh9xHOESYmvAzCw/640?wx_fmt=jpeg&tp=webp&wxfrom=5

右键保存到本地,发现文件名为“640”,无拓展名。

使用HEX查看器打开,结果如下

图片描述

之前了解过一点图像文件格式相关知识,很多格式会在文件开始部分有标识符,相当一部分用格式名字的ASCII,所以"WEBP"四个ASCII字符引起了我的关注,因为我了解过,WebP是一种2010年发布的图像编码格式,由谷歌卖力推广。

而其之后的VP8则是另一种图像编码格式,WebP在VP8基础上发展而来

于是尝试将文件拓展名改为"webp",使用chrome打开,发现就是该图片了。


顺便说一下,浏览器右键使用chrome的检查功能,发现img标签中有个属性data-backsrc。其值为:

http://mmbiz.qpic.cn/mmbiz/v6uP0lGcBZ5xKaBdWPcutsOUQmFxtuBy8rIYMUcoZnxyibweAMv6IDQNgibVibKcqricuer7vlOvh9xHOESYmvAzCw/0?wx_fmt=jpeg

data-* 用于存储页面或应用程序的私有定制数据。看属性名猜测是备用URL,看URL参数图像格式是JPEG,复制链接打开后果然是该图片的JPEG格式

因为WebP格式目前支持的浏览器相对较少,所以猜测在不兼容的浏览器上会使用jpeg文件。

尝试使用火狐打开该微信公众号链接并保存图片,发现保存的拓展名为jpg

才发现原来只要把webp格式链接末尾“&tp=webp&wxfrom=5”去掉就会变成jpg格式链接,装个逼的说:这个URL设计的不够好

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏