小编fru*_*ght的帖子

我需要在javascript中处理1000x1000px*.bmp图像(~1MiB)中的pixeldata
目前我有点卡住,因为当我尝试将数据转储到控制台时页面冻结.
到目前为止重要的代码:

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

我想这是一个性能问题,但是有更好的方法来访问像素数据吗？我真的不需要一次阅读所有内容,逐个读取像素也没关系.

编辑:

这里是更新的代码,它将使用图片的红色值填充二维数组(我正在处理黑白图片,这样就足够了)

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

没有性能问题:)只有quirk是行/列是颠倒的