問題描述

我在知乎中看到一則提問是關于使用色盤來改變人物顏色的，這里是鏈接引用該提問的一張圖片

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

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

問題解答

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

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

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

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

再說下對于現在真彩色的圖，進行顏色變換，一般是將RGB值轉成HSL/HSV值，然后通過調整H值改變色調。

最后再轉換回RGB值，這個和上面的區(qū)別在于，這種不能單獨改變一類顏色，它的變化是針對于全圖的（除非你限定變換應用區(qū)域），膚色可能會因為H值的變化有所改變。