用Canvas实现一些简单的图片滤镜

0、高斯模糊滤镜

 先构建高斯核，在x方向和y方向上分别进行一阶高斯滤波

function gaussBlur1(imgData, radius, sigma) {var pixes = imgData.data;var width = imgData.width;var height = imgData.height;var gaussMatrix = [],gaussSum = 0,x, y,r, g, b, a,i, j, k, len;radius = Math.floor(radius) || 3;sigma = sigma || radius / 3;a = 1 / (Math.sqrt(2 * Math.PI) * sigma);b = -1 / (2 * sigma * sigma);//生成高斯矩阵for (i = 0, x = -radius; x <= radius; x++, i++) {g = a * Math.exp(b * x * x);gaussMatrix[i] = g;gaussSum += g;}//归一化, 保证高斯矩阵的值在[0,1]之间for (i = 0, len = gaussMatrix.length; i < len; i++) {gaussMatrix[i] /= gaussSum;}//x 方向一维高斯运算for (y = 0; y < height; y++) {for (x = 0; x < width; x++) {r = g = b = a = 0;gaussSum = 0;for (j = -radius; j <= radius; j++) {k = x + j;if (k >= 0 && k < width) { //确保 k 没超出 x 的范围//r,g,b,a 四个一组i = (y * width + k) * 4;r += pixes[i] * gaussMatrix[j + radius];g += pixes[i + 1] * gaussMatrix[j + radius];b += pixes[i + 2] * gaussMatrix[j + radius];// a += pixes[i + 3] * gaussMatrix[j];gaussSum += gaussMatrix[j + radius];}}i = (y * width + x) * 4;// 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题// console.log(gaussSum)pixes[i] = r / gaussSum;pixes[i + 1] = g / gaussSum;pixes[i + 2] = b / gaussSum;// pixes[i + 3] = a ;}}//y 方向一维高斯运算for (x = 0; x < width; x++) {for (y = 0; y < height; y++) {r = g = b = a = 0;gaussSum = 0;for (j = -radius; j <= radius; j++) {k = y + j;if (k >= 0 && k < height) { //确保 k 没超出 y 的范围i = (k * width + x) * 4;r += pixes[i] * gaussMatrix[j + radius];g += pixes[i + 1] * gaussMatrix[j + radius];b += pixes[i + 2] * gaussMatrix[j + radius];// a += pixes[i + 3] * gaussMatrix[j];gaussSum += gaussMatrix[j + radius];}}i = (y * width + x) * 4;pixes[i] = r / gaussSum;pixes[i + 1] = g / gaussSum;pixes[i + 2] = b / gaussSum;// pixes[i] = r ;// pixes[i + 1] = g ;// pixes[i + 2] = b ;// pixes[i + 3] = a ;}}//endimgData.data = pixes;return imgData;}

　　

 

1、灰度滤镜

对于灰度滤镜的实现一般有三种算法

1) 最大值法：即新的颜色值R=G=B=Max(R,G,B),通过这种方法处理后的图片看起来亮度值偏高。

2) 平均值法：即新的颜色值R=G=B=(R+G+B)/3,这种方法处理的效果比较柔和

3) 加权平均值法：即新的颜色值R=G=B=(R*Wr+G*Wg+B*Wb)，一般由于人眼对不同颜色的敏感度不一样，所以三种颜色值的权重不一样，一般来说绿色最高，红色其次，蓝色最低，最合理的取值分别为Wr=30%，Wg=59%，Wb=11%

在这里我们使用加权平均值法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function greyEffect(canvasId){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),         pixelData = imageData.data;     for(var i=0;i<canvas.width*canvas.height;i++){         var r = pixelData[i*4+0],             g = pixelData[i*4+1],             b = pixelData[i*4+2];         var grey = 0.3 * r + 0.59 * g + 0.11 * b;         pixelData[i*4+0] = grey;         pixelData[i*4+1] = grey;         pixelData[i*4+2] = grey;     }     return imageData; }

2、黑白滤镜

算法原理：求RGB平均值Avg=(R+G+B)/3，如果Avg>=100，则新的颜色值为R=G=B=255；如果Avg<100，则新的颜色值为R=G=B=0；255就是白色，0就是黑色；至于为什么用100作比较，这是一个经验值吧，设置为128也可以，可以根据效果来调整。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function blackEffect(canvasId){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),         pixelData = imageData.data;     for(var i=0;i<canvas.width*canvas.height;i++){ var r = pixelData[i*4+0], g = pixelData[i*4+1], b = pixelData[i*4+2]; var grey = (r+g+b)/3; if(grey>=100){             v = 255;         }else{             v = 0;         }         pixelData[i*4+0] = v;         pixelData[i*4+1] = v;         pixelData[i*4+2] = v;     }     return imageData; }

3、反相滤镜（底片效果）

算法原理：将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值，即R=255–R；G=255–G；B=255–B

1 2 3 4 5 6 7 8 9 10 11 12

function reverseEffect(canvasId){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),         pixelData = imageData.data;     for(var i=0;i<canvas.width*canvas.height;i++){         pixelData[i*4+0] = 255-pixelData[i*4+0];         pixelData[i*4+1] = 255-pixelData[i*4+1];         pixelData[i*4+2] = 255-pixelData[i*4+2];     }     return imageData; }

4、模糊滤镜

算法原理：将当前像素的周边像素的RGB值各自的平均值作为新的RGB值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

function blurEffect(size){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),pixelData = imageData.data,         tmpimageData = ctx.getImageData(0,0,canvas.width,canvas.height),         tmppixelData = imageData.data;     size = size ? size : 1;     var count = Math.pow((size*2+1),2)-1;     for(var i=0;i<canvas.height;i++){         for(var j=0;j<canvas.width;j++){             var totalr = 0,totalg = 0,totalb = 0;             for(var dx=i-size;dx<=i+size;dx++){                 for(var dy=j-size;dy<=j+size;dy++){                     var p = dx * canvas.width + dy;                     if(dx===i && dy===j) continue;                     tmppixelData[p*4+0] && (totalr += tmppixelData[p*4+0]);                     tmppixelData[p*4+1] && (totalg += tmppixelData[p*4+1]);                     tmppixelData[p*4+2] && (totalb += tmppixelData[p*4+2]);                 }             }             var p = i * canvas.width + j;             pixelData[p*4+0] = totalr/count;             pixelData[p*4+1] = totalg/count;             pixelData[p*4+2] = totalb/count;         }     }     return imageData; }

5、马赛克滤镜

算法原理：其实就是将图像分成大小一致的图像块，每一个图像块都是一个正方形，并且在这个正方形中所有像素值都相等。我们可以将这个正方形看作是一个模板窗口，模板中对应的所有图像像素值都等于该模板的左上角第一个像素的像素值，这样的效果就是马赛克效果，而正方形模板的大小则决定了马赛克块的大小，即图像马赛克化的程度。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

function gosike(size){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),pixelData = imageData.data,         tmpimageData = ctx.getImageData(0,0,canvas.width,canvas.height),         tmppixelData = imageData.data;     size = size ? size : 16;     var totalNum = Math.pow(size,2);     var count = Math.pow((size*2+1),2);     for(var i=0;i<canvas.height;i+=size){         for(var j=0;j<canvas.width;j+=size){             var totalr = 0,totalg = 0,totalb = 0;             for(var dx=0;dx<=size;dx++){                 for(var dy=0;dy<=size;dy++){                     var x = i + dx;                     var y = j + dy;                     var p = x * canvas.width + y;                     totalr += tmppixelData[p*4+0];                     totalg += tmppixelData[p*4+1];                     totalb += tmppixelData[p*4+2];                 }             }             var p = i * canvas.width + j;             var avgr = totalr/count;             var avgg = totalg/count;             var avgb = totalb/count;             for(var dx=0;dx<=size;dx++){                 for(var dy=0;dy<=size;dy++){                     var x = i + dx;                     var y = j + dy;                     var p = x * canvas.width + y;                     pixelData[p*4+0] = avgr;                     pixelData[p*4+1] = avgg;                     pixelData[p*4+2] = avgb;                 }             }         }     }     return imageData; }

6、浮雕滤镜

算法原理：用当前点的RGB值减去相邻点的RGB值并加上128作为新的RGB值。由于图片中相邻点的颜色值是比较接近的，因此这样的算法处理之后，只有颜色的边沿区域，也就是相邻颜色差异较大的部分的结果才会比较明显，而其他平滑区域则值都接近128左右，也就是灰色，这样就具有了浮雕效果。在实际的效果中，这样处理后，有些区域可能还是会有一些"彩色"的点或者条状痕迹，所以最好再对新的RGB值做一个灰度处理。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

function outset(size){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),         pixelData = imageData.data,         precolor = {};     for(var i=0;i<canvas.width*canvas.height;i++){         if(i==0){             precolor = {                 r : pixelData[i*4+0],                 g : pixelData[i*4+1],                 b : pixelData[i*4+2]             }         }else{             var r = pixelData[i*4+0] - precolor.r + 128;             var g = pixelData[i*4+1] - precolor.g + 128;             var b = pixelData[i*4+2] - precolor.b + 128;             precolor = {                 r : pixelData[i*4+0],                 g : pixelData[i*4+1],                 b : pixelData[i*4+2]             }             pixelData[i*4+0] = r;             pixelData[i*4+1] = g;             pixelData[i*4+2] = b;         }         var r = pixelData[i*4+0],             g = pixelData[i*4+1],             b = pixelData[i*4+2];         var grey = 0.3 * r + 0.59 * g + 0.11 * b;         pixelData[i*4+0] = grey;         pixelData[i*4+1] = grey;         pixelData[i*4+2] = grey;     }     return imageData; }

7、去色滤镜

算法原理：将当前像素的RGB值得最大值和最小值求平均值并作为新的RGB值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function removeColor(){     var canvas = document.getElementById(canvasId),         ctx = canvas.getContext("2d"),         imageData = ctx.getImageData(0,0,canvas.width,canvas.height),         pixelData = imageData.data;     for(var i=0;i<canvas.width*canvas.height;i++){         var r = pixelData[i*4+0],             g = pixelData[i*4+1],             b = pixelData[i*4+2];         var c = Math.floor((Math.min(r,g,b) + Math.max(r,g,b))/2);         pixelData[i*4+0] = c;         pixelData[i*4+1] = c;         pixelData[i*4+2] = c;     }     return imageData; }

转载于:https://www.cnblogs.com/ckAng/p/9908993.html

总结

以上是生活随笔为你收集整理的用Canvas实现一些简单的图片滤镜的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。