Get X e pixel Y coordinate quando l'iterazione di HTML5 Canvas getImageData

Question

sto iterazione di alcuni dati di immagine tirato da un canvas in questo modo:

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

Come faccio a calcolare il X corrente e coordinate y dei pixel che sono a?

Answer 1

una semplice sequenza aritmetica:

Divide la posizione lineare per la larghezza. Questa è la tua coordinata Y. Moltiplicare la coordinata Y per la larghezza e sottrarre quel valore dalla posizione lineare. Il risultato è la coordinata X.

Inoltre, è necessario dividere la posizione lineare per 4 poiché è RGBA.

Answer 2

Questo dovrebbe funzionare

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

Answer 3

corretto e testati versione del Codice:

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