使用html5 canvas操作图像像素

    使用canvas可以进行一些简单的图像处理，一般需要加载图片，然后再进行相应的处理。

    canvas提供了诸如：getImageData, putImageData等方法。

    大致的过程是这样：

var canvas = document.getElementById('c'),
    ctx = canvas && canvas.getContext && canvas.getContext('2d'),
    imageData, pixelArray;

var img = new Image();
img.onload = function() {
    if (!ctx) return;

    ctx.drawImge(this, 0, 0);
 
    imageData = ctx.getImageData(0, 0, this.width, this.height);
    pixelArray = imageData.data;

    for (var i=0, len=pixelArray.length; i<len; i+=4) {
        var r = pixelArray[i], 
            g = pixelArray[i+1], 
            b = pixelArray[i+2], 
            a = pixelArray[i + 3];

        //进行相应处理
        pixelArray[i] = 255 - r;

        pixelArray[i+1] = 255 - g;
        pixelArray[i+2] = 255 - b;
    }

    ctx.putImageData(imageData, 0, 0);
};
img.src = 'image.jpg';

    imageData.data返回的像素数组是一维的数组，数组里的每一个元素是1byte（0～255），4个元素组成1个像素（按顺序，分别是该像素的红、绿、蓝、alpha通道）。所以上面的代码i每次加4。

    但是，我们知道，图片其实是一个2维数组，我们更希望的处理方式是通过图像的x,y坐标来定位像素。这可以这样来做：

var getPixel = function(x, y) {
    var s = x * (width * 4) + (y * 4);

    var r = pixelArray[s],
        g = pixelArray[s + 1],
        b = pixelArray[s + 2],
        a = pixelArray[s + 3];

    return [r, g, b, a];
};

    有了这一层封装，就比较好进行一些处理了。

    自己封装了一个脚本，能够像这样来处理图像：

pixelIt('container')
    .height(400)
    .width(400)
    .load('image.jpg')
    .process(function(image) {
        image.patch(0, 0, image.width, image.height, function(r, g, b, a) {
            var gray = image.util.rgb2gray(r, g, b);
            return [gray, gray, gray, a - 100];
        });
    });

    源代码，请猛击：https://github.com/KohPoll/PixelIt

    更多canvas操作像素相关，请猛击：https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas