油画滤镜算法初步探索

雪峰发表于 2016-12-08 标签：canvas, 有趣

今天本来是想在canvas上实现各种滤镜和边缘检测算法的，出乎意料的顺利，比上次在python中的实现反而更快，虽说不能像python的numpy库那样直接进行矩阵卷积，但是简单的卷积完全可以用数组替代。

图像的滤镜处理本质上就是对图像的各像素进行一系列变换，有线性也有非线性的。所以，首先需要获取图像的各个像素的颜色值，在html5中可以用image对象配合canvas的getImageData方法获取图像的像素信息。返回的像素值信息为一维数组，按像素的顺序每4个值依次为该像素点的rgba值，有了数据接下来就看处理了。

其实滤镜的核心部分就是对每个像素值该如何卷积以及如何取舍。今天在网上发现有很多种关于油画滤镜的算法，但大多都是先离散化再进行高斯模糊，得到的图像很接近于毛玻璃效果，比较散乱，看起来就像离散化的模糊效果。比如下面这个：

油画本身应该是区块化的，粗线条的，所以正确思路应该是区块内进行局部处理使其颜色接近，但是区块内的颜色具体该怎么处理我实在是想不到，不过好在发现一篇文章正好说了这些，于是就试了一下，果然效果接近油画了。他的大体思路就是以像素点为中心取一个半径为r的方形区块，将该区块的像素颜色进行等级分类，选择数量最多的那个等级内的所有像素，然后将其像素颜色取平均值作为该像素点的颜色值。思路是挺简单清晰的，只是使用的循环次数比较多，但是效果不错。以后可以试着优化一下，看看速度能提高多少。