ISSUE
前段时间小弟接到一个 issue 是说在使用对象存储的图片处理后部分图片在手机上颜色失真了, 这个让我让很不理解, 也排查了好长时间, 大体就是下面这个效果
下面这张没有处理的 dio
dio_cmyk
下面这张是由 oss 处理后的 dio, (加了 ?x-oss-process=image/resize,m_lfit,limit_0,w_1000)
dio_cmyk
由上两张图可能看到的是, 下面一张的 dio 明显更 yellow 而且看起来更 high 于上面一张
排查
当前大多数的网站都喜欢使用对象存储上的图片处理来压缩线上的图片资源, 如调整大小和格式化图片格式为 webp 之类的更适合 Web 所使用的格式. 而且常见的对象存储都是这些参数的, 一般就是在图片后面拼个 query 参数就可以, 还是比较简单易用的; 相关的文档比如:
阿里云 oss
腾讯云 cos 数据万象
我发现一但移除 oss 的处理参数后, 颜色是正常的, 但是为什么颜色会变呢, 这个也排查了半天, 最终我把图片下载下来后才发现问题所在. 我移除了 oss 参数下载了图片然后用 ps 打开后发现了坑点如下图
ps_cmyk
如上图所示, 这张图片的颜色模式是 cmyk 的, cmyk 是用于是印刷用的四色模式, 而显示器所用的模式是 rgb, 如下图
ps_rgb
这样的话解释就很合理了, 当前的图像处理都是基于颜色通道处理的, rgb 有红, 绿, 蓝三色通道, 而 cmyk 有青色, 洋红, 黄色及补色的黑色通道. 我们添加图像处理参数后, oss 把 cmyk 的四通道当成三通道处理, 最终结果就是少了一个色彩通道了.
解决方案
需要 ui 同学修改图片模式为 rgb 后, 重新上传, 具体操作就是在 ps 中 图像 -> 调整 -> 模式 ->rgb
cmyk_to_rgb
后记
上述的图片模式玩过 ps, 第一堂课就会说 cmyk 和 rgb 的关系的呢
本博客持续修改与更新中, 点击这里查看最新的内容
来源: http://www.jianshu.com/p/27197cfb5ee0