如何正确更改像素的颜色

Question

我正在使用jimp来操作图像。我正在尝试制作一个选择矩形，当绘制时具有透明颜色(#BBBBBBBB(。如何计算需要为像素设置的RGB值？我想保留旧的颜色，把透明的颜色放在上面，然后把它们组合起来。我该怎么做？

Answer 1

"我想保留旧的颜色，把透明的颜色放在上面，然后把它们组合起来
我该怎么做">

您需要在每个颜色通道(R、G和B(上进行插值。

在将颜色A与颜色B混合时，还需要在A到B路径中选择一个点(范围从0到1(。插值为您提供该点的颜色。例如，0.5是一半，因此该点给出两种颜色的50/50混合。试试红色和蓝色(结果是紫色(

"如何计算需要为像素设置的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
}