Javascript 如果PNG文件区域不透明，则为其着色

您知道有什么好的解决方案（也可以基于画布），使开发人员能够在非透明区域（如遮罩）更改png图像的颜色（用十六进制颜色填充）？我需要可以改变颜色（或背景图像）的透明区域，这就是为什么它必须保持不变。

您可以通过使用原始像素访问进行像素操作来实现这一点

• 读入像素

• 检查它是否符合标准（不透明，alpha=0）

• 用纯色替换像素

---

用于

的像素操作资源要执行所需操作，需要使用

getImageData

和

putImageData

签出

下面是一些示例代码

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);​

var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
image=document.getElementById（“testImage”）；
canvas.height=canvas.width=135；
ctx.drawImage（图像，0,0）；
var imgd=ctx.getImageData（0,0,135,135），
pix=imgd.data，
newColor={r:0，g:100，b:200}；
对于（var i=0，n=pix.length；i您可以使用所需的颜色填充图像/区域，然后在其上绘制png。
canvas API具有“仅在原始图像中不透明的像素上绘制”之类的合成方法。这比处理图像数据更快，也避免了原始权限问题

示例
您需要的合成操作是

中的源代码。画布仅在红色矩形和透明PNG重叠的地方绘制为红色。其他所有内容都是透明的

HTML:

<canvas id="canvas" width="800" height="400"></canvas>

<a href="javascript:paintNontransparent()">paint non-transparent regions red</a><br>

var color = '#FF0000';

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var textureURL = 'http://i.imgur.com/LWHZV8v.png';
var textureIMG = new Image();
textureIMG.src = textureURL;

textureIMG.onload = function(){
  canvas.width = textureIMG.width;
  canvas.height = textureIMG.height;        
  ctx.drawImage(textureIMG,0,0);
};


window.paintNontransparent = function() {
  ctx.globalCompositeOperation = "source-in";
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}