在前端開(kāi)發(fā)中，常常需要對(duì)圖片進(jìn)行特效處理。高斯模糊是一種非常常見(jiàn)的效果之一，利用該效果可以將圖片變得柔和、清晰且不失真。

在javascript中實(shí)現(xiàn)高斯模糊，需要使用canvas。使用canvas處理圖片時(shí)需要先提取圖像數(shù)據(jù)，將圖像數(shù)據(jù)放入數(shù)組傳遞給高斯模糊函數(shù)，處理完成后再將圖像數(shù)組還原并繪制在canvas上。

//高斯模糊函數(shù)
function gaussianBlur(ctx, imgData, radius) {
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;
var sigma = radius / 3;
a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
b = -1 / (2 * sigma * sigma);
//生成高斯矩陣
for (i = 0, y = -radius; y <= radius; y++, i++) {
gaussMatrix[i] = [];
for (j = 0, x = -radius; x <= radius; x++, j++) {
r = Math.sqrt(x * x + y * y);
gaussMatrix[i][j] = a * Math.exp(b * (r * r));
gaussSum += gaussMatrix[i][j];
}
}
//歸一化, 保證高斯矩陣的值在[0,1]之間
for (i = 0, len = gaussMatrix.length; i < len; i++) {
for (j = 0; j < len; j++) {
gaussMatrix[i][j] /= gaussSum;
}
}
//利用高斯矩陣，進(jìn)行圖像處理
for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
r = g = b = a = 0;
gaussSum = 0;
for (i = -radius; i <= radius; i++) {
j = x + i;
if (j >= 0 && j < width) {
k = y * width + j;
r += pixes[k * 4] * gaussMatrix[radius + i][radius];
g += pixes[k * 4 + 1] * gaussMatrix[radius + i][radius];
b += pixes[k * 4 + 2] * gaussMatrix[radius + i][radius];
gaussSum += gaussMatrix[radius + i][radius];
}
}
i = y * width + x;
pixes[i * 4] = r / gaussSum;
pixes[i * 4 + 1] = g / gaussSum;
pixes[i * 4 + 2] = b / gaussSum;
}
}
ctx.putImageData(imgData, 0, 0);
}
//調(diào)用高斯模糊函數(shù)
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
gaussianBlur(ctx, imgData, 10);
}
img.src='image.jpg';

通過(guò)上述代碼，利用高斯矩陣進(jìn)行圖像處理即可實(shí)現(xiàn)高斯模糊效果。半徑越大，圖像越模糊，但處理時(shí)間也會(huì)逐步增加，因此根據(jù)實(shí)際需求選擇合適的半徑值。

總的來(lái)說(shuō)，javascript實(shí)現(xiàn)高斯模糊效果是一個(gè)非常簡(jiǎn)單而又實(shí)用的處理方法。利用該方法可以幫助前端開(kāi)發(fā)者在圖片處理時(shí)達(dá)到更高的效果操作。