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实现一些简单的图片滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。