ISSUE

前段时间小弟接到一个issue是说在使用对象存储的图片处理后部分图片在手机上颜色失真了😂, 这个让我让很不理解，也排查了好长时间，大体就是下面这个效果

  • 下面这张没有处理的dio
dio_cmyk
dio_cmyk
  • 下面这张是由oss处理后的dio, (加了 ?x-oss-process=image/resize,m_lfit,limit_0,w_1000)
dio_cmyk
dio_cmyk

由上两张图可能看到的是，下面一张的dio明显更yellow 而且看起来更high 于上面一张

排查

当前大多数的网站都喜欢使用对象存储上的图片处理来压缩线上的图片资源，如调整大小和格式化图片格式为webp之类的更适合web所使用的格式。而且常见的对象存储都是这些参数的，一般就是在图片后面拼个query参数就可以，还是比较简单易用的😎；相关的文档比如：

我发现一但移除oss的处理参数后，颜色是正常的，但是为什么颜色会变呢? 最终我把图片下载下来后才发现问题所在, 我下载了图片然后用ps打开后发现了问题所在

ps_cmyk
ps_cmyk

如上图所示，这张图片的颜色模式是cmyk 的，cmyk是用于是印刷用的四色模式, 而显示器所用的模式是rgb， 如下图

ps_rgb
ps_rgb

这样的话解释就很合理了，当前的图像处理都是基于颜色通道处理的，rgb有红，绿，蓝三色通道，而cmyk 有青色，洋红，黄色及补色的黑色通道. 个人猜测是添加图像处理参数后, oss把cmyk 的四通道当成三通道处理，最终结果就是少了一个色彩通道了。

解决方案

让ui同学修改图片模式为rgb后，重新上传, 具体操作就是在ps中 图像->调整->模式->rgb

cmyk_to_rgb
cmyk_to_rgb

后记

上述的色彩模式玩过ps大部分课程第一堂课就会说cmyk和rgb的关系🤔,　还好玩过ps,　不让还真找不到原因.