Get X et pixel Y coordonnées lorsque vous parcourez toile HTML5 getImageData

Question

J'itérer sur des données d'image tiré d'un canvas comme ceci:

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

Comment calculer le pixel courant coordonnées X et Y que je suis à?

Answer 1

Une suite arithmétique simple:

Diviser la position linéaire de la largeur. C'est votre coordonnée Y. Multipliez cette coordonnée Y par la largeur et soustrayez cette valeur de la position linéaire. Le résultat est la coordonnée X.

Notez également, vous devrez diviser la position linéaire par 4 puisqu'il s'agit de RGBA.

Answer 2

Cela devrait fonctionner

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

Answer 3

corrigé et testé la version de code:

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