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

Мне нужно обработать пиксельные данные из изображения размером 1000x1000px * .bmp (~ 1 МБ) в 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

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