javascript - 如何在javascript中改变像素的颜色

Question

我目前正在尝试找出如何将黑色像素的颜色更改为黄色。我知道黄色有 255 个绿色和 255 个红色，还有 0 个蓝色(我认为)。所以我尝试将绿色和红色设置为 255，将蓝色设置为 0，但图像仍然保持黑色。这是我的代码:

var img = new SimpleImage(200,200);
print(img);

for (var pixel of img.values()) {
    var newG = 0 - pixel.getGreen();
    var newR = 255 - pixel.getRed();
    var newB = 255 - pixel.getBlue();
    var Black = newG + newR + newB;
    pixel.setGreen(newG);
    pixel.setRed(newR);
    pixel.setBlue(newB);

}

顺便说一句，“SimpleImage”类是黑屏图像，我试图将其变成黄色。如果需要更多信息，请告诉我，谢谢!

Answer 1

我确信有不止一种方法可以做到这一点。这里的很多人在图形 API 方面都比我更有经验。

我会通过将图像放入 Canvas 中，通过迭代每个像素来读取 Canvas ，改变颜色(是的，它是 R 255 G 255 B 000)并通过迭代写入 Canvas 。

使用图像加载 Canvas 非常简单，并且在此处的许多地方以及 w3Schools(如果您愿意)上都有解释。

function colorFilter()
{
  //Access the canvas
  c = document.getElementById("canvas1"); 
  context = c.getContext("2d");

  //Declare variables
  var imgData = context.getImageData(0,0,canvas1.width,canvas1.height);
  var data = imgData.data;

  var red = new Array();    
  var green = new Array(); 
  var blue = new Array(); 
  var alpha = new Array();    

  //Read image and make changes on the fly as it's read  
  for (i = 0; i < data.length; i += 4) 
  {                     
    red[i] = imgData.data[i];
    if (red[i] == 0) red[i] = 255; 
    green[i] = imgData.data[i+1];
    if (green[i] == 0) green[i] = 255;
    blue[i] = imgData.data[i+2]; // no change, blue == 0 for black and for yellow
    alpha[i] = imgData.data[i+3]; // Again, no change
  } 

  // Write the image back to the canvas
  for (i = 0; i < data.length; i += 4)  
  {
    imgData.data[i] = red[i];
    imgData.data[i+1] = green[i];
    imgData.data[i+2] = blue[i]; 
    imgData.data[i+3] = alpha[i];   
  } 

  context.putImageData(imgData, 0, 0);
} 

这是我在这里的第一个答案，它可能并不完美，但我经常使用它，所以它确实有效。

如果您使用的是第 3 方库，我认为不需要它，因为我使用的代码是纯 JavaScript。

希望这对我有帮助，就像这里的其他人帮助我一样。