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

Question

Мне нужно обработать pixeldata из изображения 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); 

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

EDIT:

здесь обновленный код, он будет заполнить 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