Получите координаты X и Y пикселей при итерации по холсту HTML5 getImageData

Я повторяю некоторые данные изображения, извлеченные из canvas например:

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

Как рассчитать текущие координаты пикселя X и Y, на которых я нахожусь?

Ответы

Ответ 1

Простая арифметическая последовательность:

Разделите линейное положение на ширину. Это ваша Y-координата. Умножьте Y-координату на ширину и вычтите это значение из линейного положения. Результатом является координата X.

Также обратите внимание: вам придется разделить линейную позицию на 4, так как это RGBA.

Ответ 2

Исправлена и протестирована версия кода:

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

Ответ 3

Это должно работать

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