javascript - tainted - Obtenga las coordenadas X e Y del píxel al iterar sobre el lienzo HTML5 getImageData

putimagedata

Question

Estoy iterando sobre algunos datos de imagen extraídos de un canvas como ese:

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

¿Cómo calculo las coordenadas de píxel X e Y actuales en las que estoy?

Answer 1

Esto debería funcionar

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

Answer 2

Una secuencia aritmética simple:

Divida la posición lineal por el ancho. Esa es tu coordenada Y. Multiplique esa coordenada Y por el ancho, y reste ese valor de la posición lineal. El resultado es la coordenada X.

También tenga en cuenta que deberá dividir la posición lineal entre 4 ya que es RGBA.

Answer 3

Versión corregida y probada del código:

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