ISSUE
前段時(shí)間小弟接到一個(gè)issue是說在使用對(duì)象存儲(chǔ)的圖片處理后部分圖片在手機(jī)上顏色失真了??, 這個(gè)讓我讓很不理解碘举，也排查了好長時(shí)間榴芳，大體就是下面這個(gè)效果
- 下面這張沒有處理的dio
- 下面這張是由oss處理后的dio, (加了 ?x-oss-process=image/resize,m_lfit,limit_0,w_1000)
由上兩張圖可能看到的是统抬，下面一張的dio明顯更yellow 而且看起來更high 于上面一張
排查
當(dāng)前大多數(shù)的網(wǎng)站都喜歡使用對(duì)象存儲(chǔ)上的圖片處理來壓縮線上的圖片資源铸董，如調(diào)整大小和格式化圖片格式為webp之類的更適合web所使用的格式李皇。而且常見的對(duì)象存儲(chǔ)都是這些參數(shù)的削茁，一般就是在圖片后面拼個(gè)query參數(shù)就可以宙枷，還是比較簡單易用的??；相關(guān)的文檔比如：
我發(fā)現(xiàn)一但移除oss的處理參數(shù)后茧跋，顏色是正常的慰丛，但是為什么顏色會(huì)變呢，這個(gè)也排查了半天瘾杭，最終我把圖片下載下來后才發(fā)現(xiàn)問題所在诅病。我移除了oss參數(shù)下載了圖片然后用ps打開后發(fā)現(xiàn)了坑點(diǎn)如下圖
如上圖所示，這張圖片的顏色模式是cmyk 的粥烁，cmyk是用于是印刷用的四色模式, 而顯示器所用的模式是rgb贤笆， 如下圖
這樣的話解釋就很合理了，當(dāng)前的圖像處理都是基于顏色通道處理的讨阻，rgb有紅芥永，綠，藍(lán)三色通道钝吮，而cmyk 有青色埋涧，洋紅，黃色及補(bǔ)色的黑色通道. 我們添加圖像處理參數(shù)后, oss把cmyk 的四通道當(dāng)成三通道處理奇瘦，最終結(jié)果就是少了一個(gè)色彩通道了棘催。
解決方案
需要ui同學(xué)修改圖片模式為rgb后，重新上傳, 具體操作就是在ps中 圖像->調(diào)整->模式->rgb
后記
上述的圖片模式玩過ps耳标，第一堂課就會(huì)說cmyk和rgb的關(guān)系的呢??
- 本博客持續(xù)修改與更新中醇坝，點(diǎn)擊這里查看最新的內(nèi)容
