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