Question

我正在尝试更改图像的2种颜色白色应为一种颜色，黑色应为另一种颜色

我想要改变的图像

http://i.imgur.com/Uss784I.png

我的想法是p是RGB颜色值，所以如果它小于200，它应该是黑色，而200以上应该是白色

生成的图像如下所示：

http://i.imgur.com/AyHlxOg.png

你可以看到它改变了白色而不是黑色

我无法想象我的生活，对我做错的任何建议都会非常感激

功能

var src = getChangeColorImgSrc2('#F8931D', '#008000', ctx);

function getChangeColorImgSrc2(hex1, hex2, ctx)
{
    if(!originalPixels) return; // Check if image has loaded
    var newColor = hexToRGB(hex1);
    var newColor2 = hexToRGB(hex2);

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        var p = currentPixels.data[I + 3];

        if(p > 0 && p < 200) // If it's not a transparent pixel
        {
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
        }
        else if(p > 200)
        {
            currentPixels.data[I] = originalPixels.data[I] / 255 * newColor2.R;
            currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor2.G;
            currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor2.B;
        }
    }


    ctx.putImageData(currentPixels, 0, 0);
    return canvas.toDataURL("image/png");
}

Answer 1

您的代码逻辑基本上是计算原始颜色中白色的百分比（即originalColor.R / 255），然后取出新颜色的百分比。

当尝试将白色转换为新颜色时，逻辑起作用是因为......

= originalColor.R / 255 * newColor.R
= 255 / 255 * newColor.R
= 1 * newColor.R
= newColor.R

尝试将黑色转换为新颜色时，您的逻辑会失败，因为......

= originalColor.R / 255 * newColor2.R
= 0 / 255 * newColor2.R
= 0 * newColor2.R
= 0

要将黑色转换为新颜色，您需要计算原始颜色中的黑色百分比（即（255 - original.R）/ 255），然后获取新颜色的百分比。

= (255 - originalColor.R) / 255 * newColor2.R
= (255 - 0) / 255 * newColor2.R
= 255 / 255 * newColor2.R
= 1 * newColor2.R
= newColor2.R

您还可以通过删除if语句并仅添加两种新颜色的百分比来简化代码。这将处理将灰色（白色和黑色的混合）转换为两种新颜色的混合。

在你的getChangeColorImgSrc2（）函数中，改变......

for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
    var p = currentPixels.data[I + 3];
    if(p > 0 || p < 200) // If it's not a transparent pixel
    {
        currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
        currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
        currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
    }
    else if(p > 0 || p > 200)
    {
        currentPixels.data[I] = originalPixels.data[I] / 255 * newColor2.R;
        currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor2.G;
        currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor2.B;
    }
}

为...

for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
    currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R + (255 - originalPixels.data[I]) / 255 * newColor2.R;
    currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G + (255 - originalPixels.data[I + 1]) / 255 * newColor2.G;
    currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B + (255 - originalPixels.data[I + 2]) / 255 * newColor2.B;
}

使用Canvas

1 个答案: