在画布中更改颜色图像

Question

我想在画布中更改图像的颜色

这是形象

你可以看到有一个透明的图像我尝试使用PutImgData但我的透明颜色正在改变颜色是否还有改变汽车和金钱的颜色？我使用的是这段代码:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");
canvas.height = canvas.width = 100;
ctx.fillStyle = 'red';
ctx.fillRect(10,10,20,10);
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 45, 45),
    pix = imgd.data;

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

ctx.putImageData(imgd, 0, 0);

Answer 1

要手动混合,您必须应用不同的公式来混合前景(新颜色)和背景(图像)以保留消除锯齿的像素(以防万一:问题中包含的图像实际上不是透明的,但我想你只是试图用固体棋盘背景说明透明度？).

我建议采用一种不同的方法,即CORS安全且更快(更简单) -

有两种方法可以做到这一点:一种是绘制您想要的颜色,然后将复合模式设置为destination-in然后绘制图像,或绘制图像,将复合模式设置为source-in然后绘制颜色.

使用第一种方法将以下图像着色为蓝色的示例:

var img = new Image; img.onload = draw; img.src = "//i.stack.imgur.com/cZ0gC.png";
var ctx = c.getContext("2d");

function draw() {
  // draw color
  ctx.fillStyle = "#09f";
  ctx.fillRect(0, 0, c.width, c.height);
  
  // set composite mode
  ctx.globalCompositeOperation = "destination-in";
  
  // draw image
  ctx.drawImage(this, 0, 0);
}

<canvas id=c></canvas>

使用第二种方法的示例

var img = new Image; img.onload = draw; img.src = "//i.stack.imgur.com/cZ0gC.png";
var ctx = c.getContext("2d");

function draw() {
  // draw image
  ctx.drawImage(this, 0, 0);

  // set composite mode
  ctx.globalCompositeOperation = "source-in";

  // draw color
  ctx.fillStyle = "#09f";
  ctx.fillRect(0, 0, c.width, c.height);
}

<canvas id=c></canvas>

要重置comp.模式恢复正常使用:

// reset comp. mode
ctx.globalCompositeOperation = "source-over";

至于getImageData(),这种技术的缺点是,在做这个过程中你的画布只能持有这一形象的内容.如果图像需要着色并与其他内容混合,则解决方法是使用离屏画布进行处理,然后将该画布绘制回主画布.