如何使用Fabricjs更改圖像顏色？

Question

我試圖使用Fabric.js過濾器來更改圖像的單一顏色。例如，我想這對圖像的紅色部分變爲綠色：

image.filters.push(new fabric.Image.filters.Blend({ 
    color: '#ff0000', 
    mode: 'subtract' 
})); 
image.filters.push(new fabric.Image.filters.Blend({ 
    color: '#00ff00', 
    mode: 'add' 
})); 
image.applyFilters(_canvas.renderAll.bind(_canvas)); 

但正在發生的事情是，黑色邊框都被改爲綠色爲好。有沒有辦法使用內置過濾器來做到這一點？

Answer 1

混合過濾器不用於顏色替換。

加法

該混合模式簡單地將一個圖層的像素值與另一個圖層相加。如果值大於1（在RGB的情況下），則顯示白色。 「線性道奇」產生相同的視覺效果。由於它總是產生與輸入相同或更淺的顏色，因此它也被稱爲「加上打火機」。變體從所有結束值中減1，低於0的值變爲黑色;這種模式被稱爲「加深顏色」。

減去

此混合模式簡單地減去一層與其它的像素值。如果值爲負值，則顯示黑色。

所以如果你有黑色邊框和紅色區域：

紅subctract的第一遍變換黑紅色和黑色（全零）的黑色。第二遍將黑色（全部）轉換爲綠色，將FF添加到黑色像素的綠色信道中。

要更改圖像的顏色，您應該創建一個自定義濾鏡，每個像素的像素檢測爲紅色並在其上寫入綠色。