canvas像素操作

（服务器环境下运行）
先说下关键词
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
这个像素是由rgba组成，所以像素操作就是改变rgba的值
putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
说到rgba的值，那就得用到for循环了,如下面例子

//由于rgba是4个值为一个数组所以i要+=4
for(var i = 0;i

例子：

    
    
    下载
    

其他算法介绍，想知道效果的直接套进上面的for循环里面：
怀旧效果：
[算法]：
dr=.393r+.769g+.189b;
dg=.349r+.686g+.168b;
db=.272r+.534g+.131b;
rd=Math.random()0.5+0.5;
r=rddr+(1-rd)r;

   for (i = 0; i < data.length - 4; i += 4) {   
            //遍历各像素分量     
            var dr = .393 * data[i] + .769 * data[i + 1] + .189 * data[i + 2];  
            var dg = .349 * data[i] + .686 * data[i + 1] + .168 * data[i + 2];  
            var db = .272 * data[i] + .534 * data[i + 1] + .131 * data[i + 2];  
  
            var scale = Math.random() * 0.5 + 0.5;  
  
            data[i] = scale * dr + (1 - scale) * data[i];  
            data[i + 1] = scale * dg + (1 - scale) * data[i + 1];  
            data[i + 2] = scale * db + (1 - scale) * data[i + 2];  
        }  

连环画效果：
连环画的效果与图像灰度化后的效果相似,它们都是灰度图,但连环画增大了图像的对比度,使整体明暗效果更强.
算法:
r= |g – b + g + r| * r / 256
g = |b – g + b + r| * r / 256;
b= |b – g + b + r | * g / 256;

 function comicFilter(imageData) {  
        var data = imageData.data;  
        for (i = 0; i < data.length - 4; i += 4) { //遍历各像素分量   
            data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * data[i] / 256;  
            data[i + 1] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i] / 256;  
            data[i + 2] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i + 1] / 256;  
        }  

溶铸效果：
算法及原理：
r = r128/(g+b +1);
g = g128/(r+b +1);
b = b*128/(g+r +1);

for (i = 0; i < data.length - 4; i += 4) {  
            data[i] = data[i] * 128 / (data[i + 1] + data[i + 2] + 1);  
            data[i + 1] = data[i + 1] * 128 / (data[i] + data[i + 2] + 1);  
            data[i + 2] = data[i + 2] * 128 / (data[i] + data[i + 1] + 1);  
        }  

黑白效果：
求RGB平均值Avg ＝ (R + G + B) / 3，如果Avg >= 100，则新的颜色值为R＝G＝B＝255；
如果Avg < 100，则新的颜色值为R＝G＝B＝0；255就是白色，0就是黑色；
设置为128也可以，可以根据效果来调整。

上面效果也可以运用在视频上，如做个黑白视频：