Wie funktioniert dieser Gaussian Blur JavaScript-Algorithmus?

Question

Ich habe das folgende Skript gefunden, um eine Bildverarbeitung zu einem Bild seit Javascript zu verwischen. Ich repliziert die Probe, aber ich verstand nicht, wie ein kleiner Teil dieses Skripts funktionieren könnte, zeige ich das Skript:

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'; } 

Diese Funktion (gaussianBlur()) auf eine HTML-Taste ausgelöst, so dass, wenn es angeklickt Es verarbeitet das Bild, um es unscharf zu machen, und dieser Vorgang wird entsprechend der Anzahl der Klicks auf den Button wiederholt. Der Teil des Codes, den ich nicht verstehe, ist, wenn es die for-Schleife beendet, alle mathematischen Operationen wurden auf der px Variable gespeichert, aber in der nächsten Zeile Code ctx.putImageData(data,0,0);, diese data Variable nimmt nicht die neue geänderte Variable px. Also frage ich mich, wie ist es möglich, dass die Leinwand mit dem Bild verschwommen dargestellt werden könnte, wenn data Variable nicht geändert wurde data Komponente (weil data.data = px wie in den ersten Zeilen der gaussianBlur Funktion gezeigt).

Meiner Meinung nach, diesen Code zu verstehen, habe ich ein data.data = px; nach dem for-Schleife setzen würde, mit dieser Zeile Code ich sage, dass die neuen px auf data.data variabel eingestellt werden. Und mit ot ohne diesen Zeilencode funktioniert der Algorithmus. So bin ich verwirrt warum es trotz data.data nicht durch den neuen px Wert funktioniert. Bitte hilf mir, es zu verstehen.

Vielen Dank im Voraus

Answer 1

Was passiert ist, dass px in Wirklichkeit als data.data das gleiche Objekt ist, dass Wirkung alle Änderungen in px nehmen im Objekt bedeutet, dass Sie denken, wäre nur eine Kopie ist. Blick auf diesem einfachen Beispiel:

// 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"] 

Aus diesem Grund ist der Code funktioniert nicht. px ist keine Kopie, es ist eine Referenz.