在canvas中更改颜色图像

我想在canvas中更改图像的颜色

这是图像

你可以看到有一个透明的图像我尝试使用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); }