共计 2004 个字符，预计需要花费 6 分钟才能阅读完成。
滤镜之后的图：
实现原理：
这里面用到了 canvas 的一个方法：getImageData, 这个方法可以获得图片的像素信息
**CanvasRenderingContext2D**.getImageData()返回一个ImageData构造函数创建或者使用和 canvas 在一起的 CanvasRenderingContext2D 对象的创建方法：createImageData() 和 getImageData()。也可以使用 putImageData() 设置 canvas 的一部分。”) 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为 (sx, sy)、 宽为 sw、 高为sh。
我们需要用到里面的返回对象的 data 属性，data 里面是一个大数组，包含每一个像素的信息，其中，一个像素用 4 个比特位表示，也就是 4 位组成一个像素，分别是 rgba，r：0~255，g：0~255，b：0~255，a：0~255,alpha 通道一般是 0~1，但是他这里也用 0~255 表示是为了方便。
举个例子：比如原图的第一个像素 rgba 是 0，17，43，0，对应的就是 data[0]=0,data[1]=17,data[2]=43,data[4]=255, 第二个像素同理，以此类推。
好，那么如果我们得到了这些像素的值要实现滤镜操作无非是修改这些像素的值，比如让图片泛黄，那就不要 rgba 中 b 的值。
为了用户安全的考虑，getImageData 不能读取本地的图片，只能读取服务端的文件, 服务端我们用 wamp（把你的 html 文件和图片文件放在安装好的 wamp 文件的 www 目录下，本地游览器地址栏输入 localhost/ 你的目录 / 文件名.html）就可以访问了
<canvas width="800" height="600" style="background:white;"></canvas>新建一个图片对象：
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let img=new Image();
img.src='images/1.jpg';图片加载完之后开始画图：
img.onload=function(){gd.drawImage(img,-500,0);
}获取 imageData 对象：
let imgArr=gd.getImageData(0,0,c1.width,c1.height);把 rgba 中的 b 全部变为 50：
for(let r=0;r<c1.height;r++){for(let c=0;c<c1.width;c++){imgArr.data[4*(r*c1.width+c)+2]=50;
}
}imgArr.data[4*(r*c1.width+c)+2]=50;
这句话的意思是把每一个像素的 b（blue）的值都变为 50，应为一个像素有 4 位，每一行 * 画布的宽 + 有多少列 + 2 就是每个像素的 b 的值；
更新完后还需要设置回去：
gd.putImageData(imgArr,0,0);完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
</style>
<script>
window.onload = function () {let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let img=new Image();
img.src='images/1.jpg';
img.onload=function(){gd.drawImage(img,-500,0);
let imgArr=gd.getImageData(0,0,c1.width,c1.height);
for(let r=0;r<c1.height;r++){for(let c=0;c<c1.width;c++){imgArr.data[4*(r*c1.width+c)+2]=50;
}
}
gd.putImageData(imgArr,0,0);
}
}
</script>
</head>
<body>
<canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>
