Получить пиксель из растрового изображения

Question

Мне нужно обработать пиксельные данные из изображения 1000x1000px * .bmp (~ 1MiB) в javascript
В данный момент я немного застрял, потому что страница зависает, когда я пытаюсь сбросить данные в консоль.
важный код на данный момент:

var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
console.log(context.getImageData(0, 0, canvas.height, canvas.width));

Полагаю, это проблема производительности, но есть ли лучший способ получить доступ к данным пикселей?Мне действительно не нужно читать все сразу, чтение пикселей по одному также будет хорошо.

РЕДАКТИРОВАТЬ:

вот обновленный код, он будет заполнять 2d-массивкрасное значение изображения (я имею в виду черно-белое изображение, так что этого достаточно)

var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
    pixel[i] = new Array();
    for(j=0;j<canvas.width;j++){
        pixel[i][j] = imgData.data[i*canvas.width+j*4];
    }
}
//now pixel[y][x] contains the red-value of the pixel at xy in img

никаких проблем с производительностью :) только странность заключается в том, что строки / столбцы перевернуты

Answer 1

var data   = context.getImageData(0, 0, canvas.height, canvas.width);
var count  = 0;
var tmr    = null;
var length = data.length; 
(pix = function() { 
    var r = data[count + 0];
    var g = data[count + 1];
    var b = data[count + 2];
    var a = data[count + 3];
    var rgba = 'rgba('  + r + ' ,' + g + ' ,' + b +   ' ,' + a + ')'; 
    console.log(rgba); 
    if((count += 4) >= length) { 
        clearTimeout(tmr);
        return;
    }
    tmr = setTimeout(pix, 1000/30); //at 30 fps
})();

Answer 2

Попробуйте создать холст размером 1px X 1px, переместите изображение и затем прочитайте imageData