第二. 什么是canvas的像素级处理呢？
大家可以先看抽离出来的demo:
1. 图像的像素点是怎么存储的？
在进行图像处理前，得先了解一下图像是怎么存储每一个像素点的数据的。
看个图先：
广州网站建设,网站建设,广州网页设计,广州网站设计
玩css3的同学知道一个新的颜色定义方式—rgba,这里说的跟这个很像。
简单的像素点存储其实把每个像素点用四个数字来存储，分别是R（红）、G（绿）、B（蓝）、A（不透明度），然后这里的A值跟不透明度存在一个关系，60%=153/255，即不透明度=A值/255。
通过改变每个像素点的这四个维度，我们可以达到改变纯度，透明度，色相，亮度等所有效果，这是滤镜的基础原理，玩ps的盆友也许更熟悉这块。
2. Canvas怎么读写所有像素点数据？
a) 读取
广州网站建设,网站建设,广州网页设计,广州网站设计
画布的方法：getImageData可以获取指定范围内的像素点数据。参数x、y为起始位置，w、h为范围宽高。
该方法将返回形如以下的对象：
上图对应的是存储两个像素点数据的对象，对象中含有一个叫data的数组，其每四个键值对，存储一个像素点的数据，像素点从左到右排列。
b) 写入
画布的方法：putImageData可以把指定像素点数据对象（getImageData返回的对象），填充到指定位置，x、y为开始填充点。
第三. 用法？
了解上述原理和方法之后，只要遍历取出的像素点对象，再按指定的算法来改变每个像素点的数据，再把对象重绘到画布。
然后canvas对象来输出编码（第一点），就能达到滤镜效果了。
效果的好坏主要取决于算法的好坏。
需要提醒的是，canvas的像素级处理比较耗费资源，但是对于宽高不是太大的图片，速度还是可以接受的。
这里顺带介绍一下QST库里头关于这个滤镜效果插件的简单使用：
其中preloaded为预载效果数量（由于对于某个图片，效果被渲染后会自动缓存在js对象里头，而执行渲染时需要时间，所以需要预载部分效果）。其他更详细参数，有兴趣的同学可线下交流。
