問題描述

我在知乎中看到一則提問是關(guān)于使用色盤來改變?nèi)宋镱伾模@里是鏈接引用該提問的一張圖片

里面的人物僅僅是著裝不同，但膚色是相同的，原文提到是使用了色盤來實(shí)現(xiàn)的，但太專業(yè)看得不是很懂，請問如何使用Canvas實(shí)現(xiàn)色盤來改變素材的局部顏色呢？非常感謝~

補(bǔ)充：這張圖片是用GameMaker處理過的，Canvas有方法處理這樣的圖片嗎？

問題解答

因?yàn)樵缙诳◣?nèi)存有限，所以，如果直接存圖片的話，一張卡帶光角色圖片就能塞滿了。由于位圖是有點(diǎn)陣組成的，每個(gè)點(diǎn)（也就是每個(gè)像素）都有它自己的顏色。在早期卡帶機(jī)上，能用到的顏色其實(shí)并不多，所以才有了色盤。（經(jīng)常用PS的應(yīng)該知道色盤這個(gè)東西）也就是，將一幅圖上所有用到的顏色編號，存儲成一個(gè)控制了容量大小的色盤（比如一張傳統(tǒng)的二維碼圖，其實(shí)只要存兩種顏色就可以了）。然后在存儲圖片的時(shí)候，原本對應(yīng)點(diǎn)陣的存儲需要記錄紅綠藍(lán)通道的值，而用色盤之后，直接用色盤中的序號代替對應(yīng)的顏色，這樣因?yàn)樾蛱柎鎯臻g比紅綠藍(lán)數(shù)據(jù)占用空間少，而且色盤可以復(fù)用（只要對應(yīng)顏色在色盤里存在，就可以用序號替代顏色），所以就間接節(jié)省了卡帶的空間。

而由于存儲的時(shí)候，是只存儲了色盤里的序號，所以只要改變色盤里對應(yīng)序號的顏色，就可以使圖片中對應(yīng)序號的顏色發(fā)生變化。

由于Canvas中，都是真彩色，而且因?yàn)橛?jì)算機(jī)存儲的迅速發(fā)展，現(xiàn)在的電腦存儲空間也遠(yuǎn)沒有之前卡帶中那么拮據(jù)了，所以，在Canvas里，是不存在色盤的。但是，知道了色盤的原理之后，其實(shí)你也很好想到模擬色盤的處理方案。由于色盤用編號替代顏色，也就是說，替換了色盤里的一種顏色就替換了圖片里所有顏色值等于該顏色的區(qū)域。所以根據(jù)這個(gè)思路，你要做的就是把圖片里所有顏色值等于某個(gè)值的顏色都替換掉，代碼我就不具體寫了，這里給個(gè)鏈接，希望可以得到啟發(fā)：http://www.deanhan.cn/canvas-...

另外，畫盤替換方案，針對之前卡帶游戲8位的圖像比較容易，因?yàn)轭伾珔^(qū)分度大；但是對于現(xiàn)有的真彩色位圖而言，這個(gè)難度就大了很多，因?yàn)楝F(xiàn)在的位圖里很可能出現(xiàn)區(qū)分度很小的如#dedede和#dededd的顏色梯度，這種就不太適合用畫盤的思路去做了。

再說下對于現(xiàn)在真彩色的圖，進(jìn)行顏色變換，一般是將RGB值轉(zhuǎn)成HSL/HSV值，然后通過調(diào)整H值改變色調(diào)。

最后再轉(zhuǎn)換回RGB值，這個(gè)和上面的區(qū)別在于，這種不能單獨(dú)改變一類顏色，它的變化是針對于全圖的（除非你限定變換應(yīng)用區(qū)域），膚色可能會因?yàn)镠值的變化有所改變。