javascript - 如何使用Canvas改變素材的顏色？

Question

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

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

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

#

Answer 1

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

而由於儲存的時候，是只儲存了色盤裡的序號，所以只要改變色盤裡對應序號的顏色，就可以使圖片中對應序號的顏色改變。

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

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

Update

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

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