Get X und Y Pixelkoordinaten, wenn Iteration über HTML5 getImageData Leinwand

Question

Ich bin Iterieren gezogen einige Bilddaten über von einem canvas etwa so:

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height); 
var data = imageData.data; 

for (var i = data.length; i >= 0; i -= 4) { 
    if (data[i + 3] > 0) { 
     data[i] = this.colour.R; 
     data[i + 1] = this.colour.G; 
     data[i + 2] = this.colour.B; 
    } 
} 

Wie berechne ich den aktuellen X- und Y-Pixelkoordinaten, dass ich bin beim?

Answer 1

A Simple Arithmetic Sequence:

Dividieren die lineare Position durch die Breite. Das ist deine Y-Koordinate. Multiplizieren Sie diese Y-Koordinate mit der Breite und subtrahieren Sie diesen Wert von der linearen Position. Das Ergebnis ist die X-Koordinate.

Beachten Sie auch, dass Sie die lineare Position durch 4 teilen müssen, da es RGBA ist.

Answer 2

Dies sollte funktionieren

var x = (Math.floor(i/4) % 4); 
var y = Math.floor(Math.floor(i/this.el.width)/4); 

Answer 3

Korrigierte und getestete Version von Code:

var x = (i/4) % this.el.width; 
var y = Math.floor((i/4)/this.el.width);