這篇文章主要爲大家詳細介紹了js canvas畫布實現高斯模糊效果,具有一定的參考價值,感興趣的小夥伴們可以參考一下
最近項目中有一個需求是實現圖片的局部模糊效果,看上去一個挺難的效果。在實現局部模糊效果前,首先能夠實現全部模糊。經過和度孃的一番較勁後,找到了一個不錯的案例,然後在他的基礎上,經過一番修改,和備註,實現了當前的案例:
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas畫布的高斯模糊效果</title> </head> <body> <canvas id="canvas"></canvas> </body> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); let img = new Image(); //這裏直接修改圖片的路徑 img.src = "636753681750720000/Block/preview.jpg"; img.onload = function () { //設置canvas的寬高 canvas.height = img.height; canvas.width = img.width; //將圖像繪製到canvas上面 ctx.drawImage(img, 0, 0, img.width, img.height); //從畫布獲取一半圖像 var data = ctx.getImageData(0, 0, img.width/2, img.height); //將圖像數據進行高斯模糊 data.data是一個數組,每四個值代表一個像素點的rgba的值,data.width data.height 分別代表圖像數據的寬高 var emptyData = gaussBlur(data); //將模糊的圖像數據再渲染到畫布上面 ctx.putImageData(emptyData, 0, 0); }; function gaussBlur(imgData) { 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; var radius = 10; var sigma = 5; 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; } } return imgData; } </script> </html>
代碼不多,大家直接copy一下,運行好了。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。