このGaussian Blur javascriptアルゴリズムはどのように機能しますか？

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);に保存されています。このdata変数は新しい変更変数pxを受け取りません。だから、data変数がdataコンポーネント（gaussianBlurの最初の行に示されているようにの機能）に変更されていないと、キャンバスが画像がぼやけてレンダリングされる可能性があります。

私の意見では、このコードを理解するために、私はこのループコードの後に​​data.data = px;を置きます。新しいpxはdata.dataという変数に設定されると言っています。このラインコードがないと、アルゴリズムが働きます。だから私はなぜdata.dataが新しいpxの値で設定されていないにもかかわらず、うまくいかないと混乱しています。それを理解するのを助けてください。何が起こっている事前

Answer 1

で

おかげで、pxがオブジェクトでpxテイク効果内のすべての変更は、あなただけのコピーであると思うだろうことを意味し、現実にdata.dataと同じオブジェクトであるということです。この単純な例で 見て：あなたのコードが動作しない理由を

// 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はコピーではなく、参照用です。