Canvas系列之一——滤镜效果

Canvas 真的是一个神奇的东西，不只可以绘制各类图形、文本和位图，还可以对位图进行复杂的像素运算和处理。所以像滤镜这些东西，其实 Canvas 也能够来实现。接下来，是见证奇迹的时刻。

首先，咱们须要有一个 Canvas 容器，例如：

<canvas id="myCanvas" width="800" height="800"></canvas>
复制代码

接下来，咱们须要将使用 Canvas 来绘制一张图片:

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var img = new Image();
img.src = "./images/1526010092000.jpg";	// 自备图片连接
img.onload = (e) => {
	ctx.drawImage(img, 0, 0, 800, 800);	// 第一个800表示绘制图片的宽，第二个800表示绘制图片的高
}
复制代码

Canvas首次绘制的效果

​

再接下来就是对图片的像素进行一些操做。而要实现这样的操做，首先须要从 Canvas 获取到图片的像素信息，而获取这些信息能够经过getImageData()来实现。

// ... 省略前面代码
img.onload = (e) => {
	// ... 省略前面代码
    img = ctx.getImageData(0, 0, 800, 800);	// 得到包含每一个像素点颜色的字节数据
}
复制代码

因为图片的大小为 800 * 800，由于要对像素点进行遍历，以得到每个像素点的红、绿、蓝色值。所以：

// ... 省略前面代码
img.onload = (e) => {
	// ... 省略前面代码
    var pixelLen = 800 * 800;   // 得到像素个数
    for(var i = 0; i < pixelLen * 4; i += 4) {
        var redC = img.data[i], // 第一个字节单位表明红色
            greenC = img.data[i + 1],    // 第二个字节单位表明绿色
            blueC = img.data[i + 2],   // 第三个字节单位表明蓝色
            alpha = img.data[i + 3];   // 第四个字节单位表明透明度
    }
}
复制代码

经过上面循环，咱们获取到了包含在图片数据中的每一个像素点的具体色值；须要注意的一点是，每个像素点的数据不是一位，而是相邻的四位，分别表明了该点的红、绿、蓝和透明值。所以，实际上位图字节数据的数组长度等于像素点个数乘以 4，在 for 循环中咱们也针对这一特性进行了相应处理。

经过将每一点的红、绿、蓝值进行平均，而后再将生成的平均值相同地赋予该像素点的红、绿、蓝值，就能造成灰度效果，最后经过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 基础知识、核心技术与前沿案例》 刘欢 编著