Как инвертировать цвет в канве для определенного c условия в javascript?

Question

Я хочу добавить условие: если цвет [ R = 158, G = 220, B = 163], он будет инвертирован цвет.
Как мне изменить этот код?

ctx.drawImage(background, 0, 0, canWidth, canHeight);
ctx.drawImage(character, srcX, srcY, width, height, x, y, width, height);

var imgData = ctx.getImageData(x, y, width+1, height);
var i;

for (i = 0; i < imgData.data.length; i += 4)
{
    //invert color
    imgData.data[i] = 255 - imgData.data[i];
    imgData.data[i+1] = 255 - imgData.data[i+1];
    imgData.data[i+2] = 255 - imgData.data[i+2];
    imgData.data[i+3] = 255;
}

ctx.putImageData(imgData, x, y);

Answer 1

Ну, вы можете просто использовать оператор if-else для проверки этих цветов. Сначала поместите каждый цвет в переменную. Затем проверьте правильность каждого значения r, g или b. Если это так, инвертируйте цвета. Затем вы можете присвоить (инвертированные) цвета imgData.data. Новый код будет выглядеть следующим образом:

for (var i = 0; i < imgData.data.length; i += 4) {
  //get colors
  var r = imgData.data[i];
  var g = imgData.data[i + 1];
  var b = imgData.data[i + 2];
  
  //check if it is the right color
  if (r == 158 && g == 220 && b == 163) {
    //asign new colors
    r = 255 - r;
    g = 255 - g;
    b = 255 - b;
  }
  
  //put (new) colors back
  imgData.data[i] = r;
  imgData.data[i + 1] = g;
  imgData.data[i + 2] = b;
  imgData.data[i + 3] = 255;
}