javascript - 如何在javascript中获取高斯滤波器

Question

python 有 fspecial('gaussian', f_wid, sigma) 使高斯变得简单( link )。 Javascript 有类似的工具吗？

Answer 1

是的，这对于 Javascript 来说是可能的，但并不像使用 Python 那样容易。

由于您正在寻找 JavaScript 解决方案，因此很高兴知道 HTML5 Canvas 元素有一些 built-in filters 。 Canvas 模糊的示例片段如下所示:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const texture = document.querySelector("img");
texture.onload = function(){
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.filter = 'blur(10px)';
  ctx.drawImage(this, 0, 0);
}

其他适用于 Web 的方法是 CSS 和 SVG 过滤器，它们也与 Canvas 兼容。然而，它们的设计并不适合我们的代码在 Web Worker 中运行的情况。 .

makeGaussKernel 函数创建一个具有适当滤波器大小和系数的一维数组。

function makeGaussKernel(sigma){
  const GAUSSKERN = 6.0;
  var dim = parseInt(Math.max(3.0, GAUSSKERN * sigma));
  var sqrtSigmaPi2 = Math.sqrt(Math.PI*2.0)*sigma;
  var s2 = 2.0 * sigma * sigma;
  var sum = 0.0;
  
  var kernel = new Float32Array(dim - !(dim & 1)); // Make it odd number
  const half = parseInt(kernel.length / 2);
  for (var j = 0, i = -half; j < kernel.length; i++, j++) 
  {
    kernel[j] = Math.exp(-(i*i)/(s2)) / sqrtSigmaPi2;
    sum += kernel[j];
  }
  // Normalize the gaussian kernel to prevent image darkening/brightening
  for (var i = 0; i < dim; i++) {
    kernel[i] /= sum;
  }
  return kernel;
}

Source Fiveko