高斯模糊代码

  1. function gaussBlur(imgData) {
  2.         var pixes = imgData.data;
  3.         var width = imgData.width;
  4.         var height = imgData.height;
  5.         var gaussMatrix = [],
  6.             gaussSum = 0,
  7.             x, y,
  8.             r, g, b, a,
  9.             i, j, k, len;
  11.         var radius = 10;
  12.         var sigma = 5;
  14.         a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
  15.         b = -1 / (2 * sigma * sigma);
  16.         //生成高斯矩阵
  17.         for (i = 0, x = -radius; x <= radius; x++, i++) {
  18.             g = a * Math.exp(b * x * x);
  19.             gaussMatrix[i] = g;
  20.             gaussSum += g;
  22.         }
  23.         //归一化, 保证高斯矩阵的值在[0,1]之间
  24.         for (i = 0, len = gaussMatrix.length; i < len; i++) {
  25.             gaussMatrix[i] /= gaussSum;
  26.         }
  27.         //x 方向一维高斯运算
  28.         for (y = 0; y < height; y++) {
  29.             for (x = 0; x < width; x++) {
  30.                 r = g = b = a = 0;
  31.                 gaussSum = 0;
  32.                 for (j = -radius; j <= radius; j++) {
  33.                     k = x + j;
  34.                     if (k >= 0 && k < width) {//确保 k 没超出 x 的范围
  35.                         //r,g,b,a 四个一组
  36.                         i = (y * width + k) * 4;
  37.                         r += pixes[i] * gaussMatrix[j + radius];
  38.                         g += pixes[i + 1] * gaussMatrix[j + radius];
  39.                         b += pixes[i + 2] * gaussMatrix[j + radius];
  40.                         // a += pixes[i + 3] * gaussMatrix[j];
  41.                         gaussSum += gaussMatrix[j + radius];
  42.                     }
  43.                 }
  44.                 i = (y * width + x) * 4;
  45.                 // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
  46.                 // console.log(gaussSum)
  47.                 pixes[i] = r / gaussSum;
  48.                 pixes[i + 1] = g / gaussSum;
  49.                 pixes[i + 2] = b / gaussSum;
  50.                 // pixes[i + 3] = a ;
  51.             }
  52.         }
  53.         //y 方向一维高斯运算
  54.         for (x = 0; x < width; x++) {
  55.             for (y = 0; y < height; y++) {
  56.                 r = g = b = a = 0;
  57.                 gaussSum = 0;
  58.                 for (j = -radius; j <= radius; j++) {
  59.                     k = y + j;
  60.                     if (k >= 0 && k < height) {//确保 k 没超出 y 的范围
  61.                         i = (k * width + x) * 4;
  62.                         r += pixes[i] * gaussMatrix[j + radius];
  63.                         g += pixes[i + 1] * gaussMatrix[j + radius];
  64.                         b += pixes[i + 2] * gaussMatrix[j + radius];
  65.                         // a += pixes[i + 3] * gaussMatrix[j];
  66.                         gaussSum += gaussMatrix[j + radius];
  67.                     }
  68.                 }
  69.                 i = (y * width + x) * 4;
  70.                 pixes[i] = r / gaussSum;
  71.                 pixes[i + 1] = g / gaussSum;
  72.                 pixes[i + 2] = b / gaussSum;
  73.             }
  74.         }
  75.         //end
  76.         return imgData;
  77.     }

给图片是实现高斯模糊

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         body{
  9.             margin: 0;
  10.             overflow: hidden;
  11.         }
  12.         canvas{
  13.             background: #000;
  14.         }
  15.         #back{
  16.             margin: 0;
  17.             position: absolute;
  18.             left: 600px;
  19.             top: 0px;
  20.             width: 100px;
  21.             height: 100px;
  22.             background-size: cover;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <canvas id="canvas" width="500" height="500"></canvas>
  28.     <img src="" id="img" alt="">
  29.     <div id="back"></div>
  30.     <script src="./高斯模糊.js"></script>
  31.     <script>
  32.         const img = new Image()
  33.         img.src = './images/img_01.jpg';
  34.         img.onload = function(e){
  35.             window.player.blurImg(img,document.getElementById('back'))
  36.         }
  37.     </script>
  38. </body>
  39. </html>
  2. (function (root) {
  4.     /**
  5.      * 将图片进行高斯模糊
  6.      * @param {*} imgData  图片的数据
  7.      */
  8.     function gaussBlur(imgData) {
  9.         var pixes = imgData.data;
  10.         var width = imgData.width;
  11.         var height = imgData.height;
  12.         var gaussMatrix = [],
  13.             gaussSum = 0,
  14.             x, y,
  15.             r, g, b, a,
  16.             i, j, k, len;
  18.         var radius = 10;
  19.         var sigma = 5;
  21.         a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
  22.         b = -1 / (2 * sigma * sigma);
  23.         //生成高斯矩阵
  24.         for (i = 0, x = -radius; x <= radius; x++, i++) {
  25.             g = a * Math.exp(b * x * x);
  26.             gaussMatrix[i] = g;
  27.             gaussSum += g;
  29.         }
  30.         //归一化, 保证高斯矩阵的值在[0,1]之间
  31.         for (i = 0, len = gaussMatrix.length; i < len; i++) {
  32.             gaussMatrix[i] /= gaussSum;
  33.         }
  34.         //x 方向一维高斯运算
  35.         for (y = 0; y < height; y++) {
  36.             for (x = 0; x < width; x++) {
  37.                 r = g = b = a = 0;
  38.                 gaussSum = 0;
  39.                 for (j = -radius; j <= radius; j++) {
  40.                     k = x + j;
  41.                     if (k >= 0 && k < width) {//确保 k 没超出 x 的范围
  42.                         //r,g,b,a 四个一组
  43.                         i = (y * width + k) * 4;
  44.                         r += pixes[i] * gaussMatrix[j + radius];
  45.                         g += pixes[i + 1] * gaussMatrix[j + radius];
  46.                         b += pixes[i + 2] * gaussMatrix[j + radius];
  47.                         // a += pixes[i + 3] * gaussMatrix[j];
  48.                         gaussSum += gaussMatrix[j + radius];
  49.                     }
  50.                 }
  51.                 i = (y * width + x) * 4;
  52.                 // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
  53.                 // console.log(gaussSum)
  54.                 pixes[i] = r / gaussSum;
  55.                 pixes[i + 1] = g / gaussSum;
  56.                 pixes[i + 2] = b / gaussSum;
  57.                 // pixes[i + 3] = a ;
  58.             }
  59.         }
  60.         //y 方向一维高斯运算
  61.         for (x = 0; x < width; x++) {
  62.             for (y = 0; y < height; y++) {
  63.                 r = g = b = a = 0;
  64.                 gaussSum = 0;
  65.                 for (j = -radius; j <= radius; j++) {
  66.                     k = y + j;
  67.                     if (k >= 0 && k < height) {//确保 k 没超出 y 的范围
  68.                         i = (k * width + x) * 4;
  69.                         r += pixes[i] * gaussMatrix[j + radius];
  70.                         g += pixes[i + 1] * gaussMatrix[j + radius];
  71.                         b += pixes[i + 2] * gaussMatrix[j + radius];
  72.                         // a += pixes[i + 3] * gaussMatrix[j];
  73.                         gaussSum += gaussMatrix[j + radius];
  74.                     }
  75.                 }
  76.                 i = (y * width + x) * 4;
  77.                 pixes[i] = r / gaussSum;
  78.                 pixes[i + 1] = g / gaussSum;
  79.                 pixes[i + 2] = b / gaussSum;
  80.             }
  81.         }
  82.         //end
  83.         return imgData;
  84.     }
  85.     function blurImg(img, dom) {
  86.         /**@type{HTMLCanvasElement}*/
  87.         const canvas = document.getElementById('canvas');
  88.         const ctx = canvas.getContext('2d');
  89.         canvas.width = 100;
  90.         canvas.height = 100;
  91.         // canvas 绘制图片
  92.         ctx.drawImage(img, 0, 0, img.width, img.height,0,0,canvas.width,canvas.height)
  93.         // 读取画布上图片的信息
  94.         const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  95.         // 将其高斯模糊后的图片数据
  96.         const gaussData = gaussBlur(imgData);
  97.         // 将其高斯模糊后的数据覆盖到原图片的数据
  98.         ctx.putImageData(gaussData, 0, 0);
  99.         // 获取图片的地址
  100.         const imgSrc = canvas.toDataURL();
  101.         dom.style.backgroundImage='url('+imgSrc+')';
  103.     }
  104.     // 暴露给window.player身上
  105.     root.blurImg = blurImg;
  107. })(window.player || (window.player = {}))