Canvas系列之滤镜效果

putImageData()

// ... 省略前面代码
img.onload = (e) => {
// ... 省略前面代码
for(var i = 0; i < pixelLen * 4; i += 4) {
// ... 省略前面代码
var grey = parseInt((redC + greenC + blueC) / 3); // 平均后获取灰度值
img.data[i] = grey; // 改变红色值
img.data[i + 1] = grey; // 改变绿色值
img.data[i + 2] = grey; // 改变蓝色值
}
 ctx.putImageData(img, 0, 0, 800, 800); // 重新绘制图片
} 

此时，则会形成灰度效果，如下图

Canvas第二次绘制图片-灰度效果

透明度的控制只需要修改第四个字节单位对应的数值即可，该数值的范围为0~256，0代表完全透明，256代表完成不透明。例如：

// ... 省略前面代码
img.onload = (e) => {
// ... 省略前面代码
for(var i = 0; i < pixelLen * 4; i += 4) {
// ... 省略前面代码
img.data[i + 3] = 128; // 透明度50%
}
// ... 省略前面代码
} 

Canvas第三次绘制效果-增加透明度

由此，通过控制图片中每个像素4个数据的值，即可达到滤镜的效果，是不是 so easy！

参考文献：

《HTML5 基础知识、核心技术与前沿案例》 刘欢 编著