HTML5更改图像的RGB值

Question

我是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以增强蓝色通道？有人可以让我通过代码来更好地理解它吗？

提前致谢 莫罗

Answer 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;
  }

原始图片来自维基百科：

Answer 2

我会尝试EaselJS库。

您可以使用ColorFilter，ColorMatrix和ColorMatrixFilter来操纵图片。改变这些值很容易，你也可以轻松地动画（转换）它们。