3.6 处理像素：图像反色

现在，我们知道如何访问图像数据，包括图像或视频的每一个像素的RGBA，下一步我们探索一下处理像素的可能性。本节，通过反转每个像素的颜色，来实现图像的反色处理。

警告：由于getImageData()方法的安全限制，本节的例子必须在Web服务器上运行。

绘制步骤

按照以下步骤，实现图像的反色处理：

1. 定义画布上下文：

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

2. 创建一个image对象，并把onload属性设置为一个绘制图像和获取图像数据的函数：

  var imageObj  = new Image();
  imageObj.onload  = function(){
    var sourceWidth  = this.width;
    var sourceHeight = this.height;
    var sourceX  = canvas.width  /  2  - sourceWidth  /  2;
    var sourceY  = canvas.height  /  2  - sourceHeight  /  2;
    var destX  = sourceX;
    var destY  = sourceY;
    context.drawImage(this, destX, destY);
    var imageData  = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
    var data  = imageData.data;

3. 循环处理图像的所有像素，并反转其颜色：

  for  (var i  =  0; i  < data.length; i  +=  4)  {
       data[i]  =  255  - data[i];              // red 红
       data[i  +  1]  =  255  - data[i  +  1];  // green 绿
       data[i  +  2]  =  255  - data[i  +  2];  // blue蓝
       // i+3 is alpha  (the fourth element) i+3是透明度（第四个元素）
   }

4. 使用处理后的图像覆盖源图像，然后在onload 定义的外面，设置图像的源地址：

    //使用新图像的数据覆盖源图像
    context.putImageData(imageData, destX, destY);
  };
  imageObj.src  = "jet_300x214.jpg";
};

5. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要使用HTML5的画布对图像进行反色处理，可以简单地循环处理图像的所有像素，再使用颜色反转算法反转每一个像素的颜色。不必担心，这比听起来简单多了。要反转一个像素的颜色，只需用255减去该像素的每一个RGB分量即可，代码如下：

data[i] = 255 - data[i]; // red

data[i+1] = 255 - data[i+1]; // green

data[i+2] = 255 - data[i+2]; // blue

像素被更新完成后，我们可以调用画布上下文对象的putImageData()方法来重绘图像：

context.putImageData(imageData, destX, destY);

从根本上说，该方法允许我们使用图像数据，而不是使用drawImage()方法的源图像来绘制图像。