HTML5 更改图像的 RGB 值答案

【问题标题】：HTML5 change the RGB values of an imageHTML5 更改图像的 RGB 值
【发布时间】：2012-05-23 18:47:56
【问题描述】：

我是 HTML5 图像处理的新手。我需要一些帮助来更改图像的 RGB 值以创建不同的效果。在网上我没有找到任何关于它的直接教程。我已经整理了一些代码，开始在网上到处走走：

 window.onload = function(){
     var imageObj = new Image();
     imageObj.onload = function(){
         drawImage(this);
     };
     imageObj.src = "images/test.jpg";
 };

 function drawImage(imageObj){
      var canvas = document.getElementById("mau");
      var context = canvas.getContext("2d");

      var destX = 1;
      var destY = 1;

      context.drawImage(imageObj, destX, destY);

      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      var data = imageData.data;

      for (var i = 0; i < data.length; i += 4) {
          var red = data[i]; // red
          var green = data[i + 1]; // green
          var blue = data[i + 2]; // blue
          // i+3 is alpha (the fourth element)
      }

      // overwrite original image
      context.putImageData(imageData, 0, 0);
 }

在这个阶段，图像显示没有变化。例如，如何更改 3 个变量 R、G、B 以增强蓝色通道？有人可以通过代码让我更好地理解它吗？

提前致谢毛罗

【问题讨论】：

你实际上并没有改变imageData，你只是将值读入red、green和blue，然后什么也没做。
是的，罗伯特这就是我的问题的重点。我可以阅读它们，但如何更改它们？
反过来：data[i] = whatever.
好的，我已经这样做了：data[i] = 23;数据[i + 1] = 23;数据[i + 2] = 120;但只返回一个没有图像的蓝色方块。我做错了什么？
您已将图像中的每个像素设置为红色值 23、绿色值 23 和蓝色值 120 - 你做的一切都是正确的。

标签： javascript image html canvas

【解决方案1】：

Here's a quick example。它交换周围的红色、绿色和蓝色分量：

  for (var i = 0; i < data.length; i += 4) {
      var red = data[i]; // red
      var green = data[i + 1]; // green
      var blue = data[i + 2]; // blue
      // i+3 is alpha (the fourth element)
      data[i] = green;
      data[i + 1] = blue;
      data[i + 2] = red;
  }

原图来自维基百科：

【讨论】：

图片不再加载
您的答案中有一张图片显示“请不要上传具有此标题的文件。请使用更准确的名称”。我不认为这就是您要用作示例图像的意思。
你不打算解决这个问题？
对我来说，它看起来像是一个错误图像，它替换了您打算用于示例的图像。
当你问我时，选择真的很混乱。

【解决方案2】：

我会尝试EaselJS 库。

您可以使用ColorFilter、ColorMatrix 和ColorMatrixFilter 来处理图像。更改值很容易，您也可以轻松地为它们设置动画（过渡）。

【讨论】：