溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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>1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。
以上是“js中如何使用canvas畫布實現高斯模糊效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
