問(wèn)題描述

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

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

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

問(wèn)題解答

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

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

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

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

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

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