0

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

提前感谢毛罗

4

2 回答 2

3

这是一个简单的例子。它交换周围的红色、绿色和蓝色分量：

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

原图来自维基百科：

测试图像原件

于 2012-05-23T10:47:56.230 回答
0

我会尝试EaselJS库。

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

于 2012-05-23T10:24:51.800 回答