js中如何使用canvas畫布實(shí)現(xiàn)高斯模糊效果

發(fā)布時間：2021-05-20 11:36:14 來源：億速云閱讀：830 作者：小新欄目：web開發(fā)

這篇文章主要介紹js中如何使用canvas畫布實(shí)現(xiàn)高斯模糊效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

最近項(xiàng)目中有一個需求是實(shí)現(xiàn)圖片的局部模糊效果，看上去一個挺難的效果。在實(shí)現(xiàn)局部模糊效果前，首先能夠?qū)崿F(xiàn)全部模糊。經(jīng)過和度娘的一番較勁后，找到了一個不錯的案例，然后在他的基礎(chǔ)上，經(jīng)過一番修改，和備注，實(shí)現(xiàn)了當(dāng)前的案例：

<!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 () {
 //設(shè)置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);
 //將圖像數(shù)據(jù)進(jìn)行高斯模糊 data.data是一個數(shù)組，每四個值代表一個像素點(diǎn)的rgba的值，data.width data.height 分別代表圖像數(shù)據(jù)的寬高
 var emptyData = gaussBlur(data);
 //將模糊的圖像數(shù)據(jù)再渲染到畫布上面
 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 方向一維高斯運(yùn)算
 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 是為了消除處于邊緣的像素, 高斯運(yùn)算不足的問題
  // console.log(gaussSum)
  pixes[i] = r / gaussSum;
  pixes[i + 1] = g / gaussSum;
  pixes[i + 2] = b / gaussSum;
  // pixes[i + 3] = a ;
  }
 }
 //y 方向一維高斯運(yùn)算
 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>

JavaScript的特點(diǎn)

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運(yùn)行。

以上是“js中如何使用canvas畫布實(shí)現(xiàn)高斯模糊效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

js中如何使用canvas畫布實(shí)現(xiàn)高斯模糊效果

JavaScript的特點(diǎn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽