（服务器环境下运行）
先说下关键词
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
这个像素是由rgba组成，所以像素操作就是改变rgba的值
putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
说到rgba的值，那就得用到for循环了,如下面例子
//由于rgba是4个值为一个数组所以i要+=4
for(var i = 0;i<data.length;i+=4){
//数组的第一个值为r 依次类推
//data[i]-----r
//data[i+1]----g
//data[i+2]----b
//data[i+3]----a
}
例子：
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<img src="2.jpg" alt="" id="img">
<a href="" id="down" download = "1.jpg">下载</a>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('img');
var down = document.getElementById('down');
//先预加载
img.onload = function(){
//将图片放到canvas
c.drawImage(img,0,0);
//获取到图片数据
//开始复制的左上角位置的 x 坐标,开始复制的左上角位置的 y 坐标,将要复制的矩形区域的宽度。将要复制的矩形区域的高度。
var imgData = ctx.getImageData(0,0,400,400);
//想更清楚图片数据的可以 console.log(imgData);
//一个包含颜色信息的数组，以4个一个单位，分别表示rgba
var data = imgData.data;
for(var i = 0;i<data.length;i+=4){
//灰度效果.299 * r + .587 * g + .114 * b; （这是公式，原理我不懂）
//data[i]-----r
//data[i+1]----g
//data[i+2]----b
//data[i+3]----a
data[i]=data[i+1]=data[i+2]=.299*data[i]+.587*data[i+1]+.114*data[i+2];
}
//putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
c.putImageData(imgData,0,0)
//下载
//将canvas转成图片url
var src = canvas.toDataURL('image/jpg')
down.href = src;
}
</script>
</body>
其他算法介绍，想知道效果的直接套进上面的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也可以，可以根据效果来调整。
上面效果也可以运用在视频上，如做个黑白视频：
<body>
<canvas id="canvas" width="640" height="360"></canvas>
<video autoplay="true" controls="true" loop="true" id="vid">
<source src="BigBuckBunny_640x360.mp4" type="video/mp4">
<source src="BigBuckBunny_640x360.ogv" type="video/ogg">
</video>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var vid = document.getElementById('vid');
vid.oncanplaythrough = function(){
function play(){
ctx.drawImage(vid,0,0);
//拿到一帧的信息
var vidData = ctx.getImageData(0,0,640,360);
//拿到这一帧的rgba
var data = vidData.data;
for(var i =0;i<data.length;i+=4){
var myRed = data[i];
var myGreen = data[i + 1];
var myBlue = data[i + 2];
myGray = parseInt((myRed + myGreen + myBlue) / 3);
//取平均值，替代原来的颜色值.
data[i] = myGray;
data[i + 1] = myGray;
data[i + 2] = myGray;
}
ctx.putImageData(vidData,0,0);
window.requestAnimationFrame(play);
}
play();
}
</script>
