JavaScript是一門高級編程語言，廣泛應用于WEB開發中，也可以用來做一些圖像處理方面的工作。其中，圖片模糊是一項非常常見的圖像處理任務，通過將圖像像素的值進行模糊化，可以使圖像看起來更加柔和和有立體感。在JavaScript中，我們可以輕松地實現圖片模糊的效果。
在JavaScript中，實現圖片模糊效果的方式有很多，其中比較流行的方法是利用Canvas API來實現。下面展示一個簡單的例子，使用全屏Canvas來演示圖片模糊效果。
const canvas = document.getElementById("blur-canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.drawImage(img, 0, 0, window.innerWidth, window.innerHeight);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const radius = 20;
for (let y = 0; y< canvas.height; y++) {
for (let x = 0; x< canvas.width; x++) {
let r = 0;
let g = 0;
let b = 0;
let a = 0;
let count = 0;
for (let dy = -radius; dy<= radius; dy++) {
for (let dx = -radius; dx<= radius; dx++) {
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx< canvas.width && ny >= 0 && ny< canvas.height) {
const index = (ny * canvas.width + nx) * 4;
r += data[index];
g += data[index + 1];
b += data[index + 2];
a += data[index + 3];
count++;
}
}
}
const index = (y * canvas.width + x) * 4;
data[index] = Math.round(r / count);
data[index + 1] = Math.round(g / count);
data[index + 2] = Math.round(b / count);
data[index + 3] = Math.round(a / count);
}
}
ctx.putImageData(imageData, 0, 0);
};
img.src = "https://picsum.photos/800/600";