（服務(wù)器環(huán)境下運(yùn)行）
先說下關(guān)鍵詞
getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素?cái)?shù)據(jù)。
這個(gè)像素是由rgba組成，所以像素操作就是改變r(jià)gba的值
putImageData() 方法將圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上。
說到rgba的值，那就得用到for循環(huán)了,如下面例子
//由于rgba是4個(gè)值為一個(gè)數(shù)組所以i要+=4
for(var i = 0;i<data.length;i+=4){
//數(shù)組的第一個(gè)值為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');
//先預(yù)加載
img.onload = function(){
//將圖片放到canvas
c.drawImage(img,0,0);
//獲取到圖片數(shù)據(jù)
//開始復(fù)制的左上角位置的 x 坐標(biāo),開始復(fù)制的左上角位置的 y 坐標(biāo),將要復(fù)制的矩形區(qū)域的寬度。將要復(fù)制的矩形區(qū)域的高度。
var imgData = ctx.getImageData(0,0,400,400);
//想更清楚圖片數(shù)據(jù)的可以 console.log(imgData);
//一個(gè)包含顏色信息的數(shù)組，以4個(gè)一個(gè)單位，分別表示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() 方法將圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上。
c.putImageData(imgData,0,0)
//下載
//將canvas轉(zhuǎn)成圖片url
var src = canvas.toDataURL('image/jpg')
down.href = src;
}
</script>
</body>
其他算法介紹，想知道效果的直接套進(jìn)上面的for循環(huán)里面：
懷舊效果：
[算法]：
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];
}
連環(huán)畫效果：
連環(huán)畫的效果與圖像灰度化后的效果相似,它們都是灰度圖,但連環(huán)畫增大了圖像的對比度,使整體明暗效果更強(qiáng).
算法:
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平均值A(chǔ)vg ＝ (R + G + B) / 3，如果Avg >= 100，則新的顏色值為R＝G＝B＝255；
如果Avg < 100，則新的顏色值為R＝G＝B＝0；255就是白色，0就是黑色；
設(shè)置為128也可以，可以根據(jù)效果來調(diào)整。
上面效果也可以運(yùn)用在視頻上，如做個(gè)黑白視頻：
<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>
