如何判断图片的格式
问题
客户上传的一张图片，chrome 和大部分的 Android 设备访问都正常，而苹果的设备访问则打不开，这是为什么？
chrome 访问
safari 访问
这是为什么呢？当遇到这类问题，我们应该怎么去排查？
首先，当我们看到这类问题，第一眼就该有个意识，图片格式有问题。因为 Android 操作系统是谷歌的，chrome 也是谷歌的，国产的一些 chromium 内核的浏览器其本质也和谷歌浏览器一样，比如360、QQ 浏览器、搜狗浏览器都是 chrome 开源版浏览器的内核。
那么我们平常接触到的图片格式有，jpg、gif、png。这些格式正常来说在不同内核的浏览器上都是可以正常识别的，而只有一种格式是只能在 chrome 浏览器上正常访问，其他浏览器不支持。
什么是 webp
webp 是谷歌开源的图片编码格式，它的最大特点就是算法牛逼，能够将图片的体积缩小但是质量不减。具体参考 google 官网说明https://developers.google.com/speed/webp/
怎么判断图片是 webp 呢
1.首先，第一种方式是查看图片的 response 头信息中的 content-type 字段,如果字段中带有 image/webp 就表示该图片是 webp 的格式，你可以试试把这个图片的 url 放到 Safari 访问试试。
2.我们查看上述案例的图片格式，发现其类型是 image/jpeg 格式，那能证明这张图片就不是 webp 了吗？
我们通过 ffplay 去查看下，发现其输入的格式是 webp。
ffplay http://cdn.zhi6.live/upload/20180830/968d5e9e866c6951d5c67b05e6e3f393.jpg
ffplay version 4.0.2 Copyright (c) 2003-2018 the FFmpeg developers
built with Apple LLVM version 9.1.0 (clang-902.0.39.2)
configuration: --prefix=/usr/local/Cellar/ffmpeg/4.0.2 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-gpl --enable-ffplay --enable-libmp3lame --enable-libx264 --enable-libxvid --enable-opencl --enable-videotoolbox --disable-lzma
libavutil 56. 14.100 / 56. 14.100
libavcodec 58. 18.100 / 58. 18.100
libavformat 58. 12.100 / 58. 12.100
libavdevice 58. 3.100 / 58. 3.100
libavfilter 7. 16.100 / 7. 16.100
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 1.100 / 5. 1.100
libswresample 3. 1.100 / 3. 1.100
libpostproc 55. 1.100 / 55. 1.100
Input #0, webp_pipe, from 'http://cdn.zhi6.live/upload/20180830/968d5e9e866c6951d5c67b05e6e3f393.jpg':
Duration: N/A, bitrate: N/A
Stream #0:0: Video: webp, yuv420p(tv, bt470bg/unknown/unknown), 1008x2016, 25 tbr, 25 tbn, 25 tbc
|
另外如果不打算安装 ffplay 可以找一些在线图片格式检测的网站去检测下
文章作者：阿文
版权声明：本博客所有文章除特别声明外，均采用
CC BY-NC-SA 4.0 许可协议。转载请注明来自
阿文的博客！
评论
0 条评论