javascript - 如果不透明，则为 PNG 文件区域着色

您知道任何好的解决方案(也可以基于 Canvas )，使开发人员能够在非透明区域(如蒙版)中更改 png 图像的颜色(填充十六进制颜色)？我需要会改变颜色(或背景图像)的透明区域，这就是为什么它必须保持不变。

最佳答案

要执行您想要的操作，您需要使用 getImageData 和 putImageData 检查 mdn for an explanation on pixel manipulation 。

这是一些示例代码

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {r:0,g:100,b:200};

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        if(r == 216 && g == 6 && b == 6){
            // Change the red to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
        }
}

ctx.putImageData(imgd, 0, 0);​

Example demo

使用上面的代码，您可以使用以下代码检查紫红色
if(r == 255 && g == 0 && b == 255)
然后只需将 newColor 更改为替换颜色。

关于javascript - 如果不透明，则为 PNG 文件区域着色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10878477/