0、高斯模糊濾鏡

?先構(gòu)建高斯核，在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、灰度濾鏡

對于灰度濾鏡的實現(xiàn)一般有三種算法

1) 最大值法：即新的顏色值R=G=B=Max(R,G,B),通過這種方法處理后的圖片看起來亮度值偏高。

2) 平均值法：即新的顏色值R=G=B=(R+G+B)/3,這種方法處理的效果比較柔和

3) 加權(quán)平均值法：即新的顏色值R=G=B=(R*Wr+G*Wg+B*Wb)，一般由于人眼對不同顏色的敏感度不一樣，所以三種顏色值的權(quán)重不一樣，一般來說綠色最高，紅色其次，藍色最低，最合理的取值分別為Wr=30%，Wg=59%，Wb=11%

在這里我們使用加權(quán)平均值法：

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平均值A(chǔ)vg=(R+G+B)/3，如果Avg>=100，則新的顏色值為R=G=B=255；如果Avg<100，則新的顏色值為R=G=B=0；255就是白色，0就是黑色；至于為什么用100作比較，這是一個經(jīng)驗值吧，設(shè)置為128也可以，可以根據(jù)效果來調(diào)整。

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、反相濾鏡（底片效果）

算法原理：將當(dāng)前像素點的RGB值分別與255之差后的值作為當(dāng)前點的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、模糊濾鏡

算法原理：將當(dāng)前像素的周邊像素的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、馬賽克濾鏡

算法原理：其實就是將圖像分成大小一致的圖像塊，每一個圖像塊都是一個正方形，并且在這個正方形中所有像素值都相等。我們可以將這個正方形看作是一個模板窗口，模板中對應(yīng)的所有圖像像素值都等于該模板的左上角第一個像素的像素值，這樣的效果就是馬賽克效果，而正方形模板的大小則決定了馬賽克塊的大小，即圖像馬賽克化的程度。

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、浮雕濾鏡

算法原理：用當(dāng)前點的RGB值減去相鄰點的RGB值并加上128作為新的RGB值。由于圖片中相鄰點的顏色值是比較接近的，因此這樣的算法處理之后，只有顏色的邊沿區(qū)域，也就是相鄰顏色差異較大的部分的結(jié)果才會比較明顯，而其他平滑區(qū)域則值都接近128左右，也就是灰色，這樣就具有了浮雕效果。在實際的效果中，這樣處理后，有些區(qū)域可能還是會有一些"彩色"的點或者條狀痕跡，所以最好再對新的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、去色濾鏡

算法原理：將當(dāng)前像素的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; }

轉(zhuǎn)載于:https://www.cnblogs.com/ckAng/p/9908993.html

總結(jié)

以上是生活随笔為你收集整理的用Canvas实现一些简单的图片滤镜的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。