如何正確更改像素的顏色？

Question

我正在使用jimp來操作圖像。 我正在嘗試制作類似於選擇矩形的東西，當繪制時它具有透明顏色（ #BBBBBBBB ）。 如何計算需要為像素設置的RGB值？ 我想保留舊顏色並將透明顏色放在上面並將它們組合起來。 我怎樣才能做到這一點？

Answer 1

“我想保留舊顏色並將透明顏色放在上面，然后將它們組合起來。
我怎樣才能做到這一點？”

您需要在每個顏色通道（R、G 和 B）上進行插值。

在將顏色 A 與顏色 B 混合時，您還需要 select A-to-B 路徑中的一個點（范圍從 0 到 1）。 插值為您提供該點的顏色。 例如， 0.5是中間值，因此該點給出了兩個 colors 的 50/50 混合。 用 colors 紅色和藍色試試（結果是紫色）

“如何計算需要為像素設置的 RGB 值？”

var stepPoint = 0.5; //0.5 = 50% blend
var new_Red   = old_R + stepPoint * (transparent_R - old_R);
var new_Green = old_G + stepPoint * (transparent_G - old_G);
var new_Blue  = old_B + stepPoint * (transparent_B - old_B);

//# usage (after interpolation calculations)
some_Image_Data [i+0] = new_Red;
some_Image_Data [i+1] = new_Green;
some_Image_Data [i+2] = new_Blue;

//# or if you want to package as 32-bit integer of RGBA format
//var mixedColor = ( new_Red << 24) | ( new_Green << 16) | ( new_Blue << 8) | (255);

一種更快/更簡單的方法可能是只調整“透明”圖像數據中每個像素的alpha值。 這樣，當像素設置到另一個 imageData 上時，它已經具有透明度。

var idx = 0; //# starting index position in bytes
while (true)
{
    if( idx >= some_Image_Data.length ) { break; }
    
    some_Image_Data[idx+3] = 128; //# set between 0-255... lower is more transparent
    idx += 4; //# move on to next pixel
}