使用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

posted on 2011-11-29 22:03  KohPoll  阅读(886)  评论(0编辑  收藏  举报