在画布中更改颜色图像 [英] Change color Image in Canvas

问题描述

我想改变画布中的图像颜色

I want to change color a Image in canvas

这是图像

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

You can see there is a Image transparent I was try using PutImgData but my transparent is changing color Is there anyway to change color the car and money only ? I was using this code :

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

推荐答案

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

To mix manually you would have to apply a different formula to mix foreground (new color) and background (image) to preserve anti-aliased pixels (and just in case: the image included in the question is not actually transparent, but I guess you just tried to illustrate transparency using the solid checkerboard background?).

我建议使用另一种方法，即CORS安全且更快（更简单） -

I would suggest a different approach which is CORS safe and much faster (and simpler) -

有几种方法可以做到这一点：一种是绘制你想要的颜色，然后将复合模式设置为 destination-in ，然后绘制图像，或绘制图像，将复合模式设置为 source-in ，然后绘制颜色。

There are a couple of ways to do this: one is to draw in the color you want, then set composite mode to destination-in and then draw the image, or draw the image, set composite mode to source-in and then draw the color.

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。模式恢复正常使用：

To reset comp. mode back to normal use:

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

与 getImageData（）一样，缺点使用此技术的是，您的画布必须仅在执行此过程时保留此图像的内容。如果图像需要着色并与其他内容混合，则解决方法是使用离屏画布进行处理，然后将该画布绘制回主画布。

As with getImageData(), the drawback with this technique is that your canvas must only hold the content of this image while doing this process. A workaround if the image needs to be colored and mixed with other content is to use an off-screen canvas to do the processing, then draw that canvas back onto the main canvas.

这篇关于在画布中更改颜色图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！