Question

我发现以下脚本可以自javascript以来对图像进行模糊图像处理。我复制了样本，但我不明白这个脚本的一小部分如何正常工作，我将展示脚本：

var gaussianBlur = function() {
  var data = ctx.getImageData(0,0,canvas.width,canvas.height);
  var px = data.data;
  var tmpPx = new Uint8ClampedArray(px.length);
  tmpPx.set(px);

  for (var i = 0, len= px.length; i < len; i++) {
     if (i % 4 === 3) {continue;}

     px[i] = ( tmpPx[i] 
        + (tmpPx[i - 4] || tmpPx[i])
        + (tmpPx[i + 4] || tmpPx[i]) 
        + (tmpPx[i - 4 * data.width] || tmpPx[i])
        + (tmpPx[i + 4 * data.width] || tmpPx[i]) 
        + (tmpPx[i - 4 * data.width - 4] || tmpPx[i])
        + (tmpPx[i + 4 * data.width + 4] || tmpPx[i])
        + (tmpPx[i + 4 * data.width - 4] || tmpPx[i])
        + (tmpPx[i - 4 * data.width + 4] || tmpPx[i])
        )/9;
  };
  // data.data = px;

  ctx.putImageData(data,0,0);
  delete tmpPx;
  btnBlur.removeAttribute('disabled');
  btnBlur.textContent = 'Blur'; }

此功能（gaussianBlur()）被触发到html按钮，因此当它被点击时，它将处理图像以使其模糊，并且此过程将根据点击次数重复按钮。我不理解的代码部分是当它完成for循环时，所有数学运算都保存在px变量上但在下一行代码ctx.putImageData(data,0,0);中，这个{{1变量不会采用新的变更变量data。所以我想知道，如果px变量没有更改其data组件（因为data，如第一行所示），画布如何渲染图像会变得模糊data.data = px函数）。

在我看来，为了理解这段代码，我会在for循环之后添加gaussianBlur，这个行代码我说新的data.data = px;将设置在px上变量。如果不使用此行代码，则算法可以正常工作。所以我很困惑，尽管新data.data值未设置data.data，但它仍然有效。请帮我理解。

提前致谢

Answer 1

正在发生的事情是，px实际上是与data.data相同的对象，这意味着px中的每个更改都会在您认为只是副本的对象中生效。看看这个简单的例子：

// We create an object 'x' with an array of data
var x = {
    data :[ 0, 1]
};

// Assign x.data value to 'p'
var p = x.data;
console.log(p); // [0, 1]
// Then we change one of the array's values to 'Xpto'
p[1] = "Xpto";
// Now look what happened to x.data
console.log(x.data); // [0, "Xpto"]

这就是您的代码无效的原因。 px不是副本，而是参考。

这个Gaussian Blur javascript算法有可能如何工作？

1 个答案: