从位图中获取像素答案

【问题标题】：Get pixel from bitmap从位图中获取像素
【发布时间】：2011-05-08 10:35:45
【问题描述】：

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

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

没有性能问题 :) 唯一的怪癖是行/列颠倒了

【问题讨论】：

愚蠢的问题：你有没有试过先用一个小图像来让它工作？
您正在将 100 万像素 转储到控制台并想知道为什么浏览器会死机？认真的吗？
Pekka：是的，我认为这是一个性能问题，如果我知道一种逐个访问像素的方法，我就不会问了。

标签： javascript image canvas bitmap pixel

【解决方案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
})();

【讨论】：

我有一些问题：在 $-1 行中，不应该是 s/clr/tmr/ 吗？这是什么 (x=function(){})();-结构调用，所以我可以了解更多关于它的信息（谷歌对括号/大括号不太好）。我不会将其标记为答案，因为即使使用 300fps，这也需要将近 1 小时。我必须先测试另一个答案。
另外，您的代码有问题：它打印 4 个字节，但只前进 1 个字节，因此输出重叠 3 个字节，最后 3 个输出将具有最后一个值“未定义”，其 data.data[ ...]。
是的，伙计，我承认这很麻烦.. 我有点困的时候已经回答了:) 更新了我的帖子。请看看我的更新。祝你有美好的一天！
(x=function(){})(); 它是一个自执行匿名函数，它启动函数。达到帧速率 [30fps] 时，您可以至少查看图像数据详细信息，而不必挂断浏览器。好吧，我不会求你接受我的回答，因为我什么也得不到，如果我的回答被接受甚至被否决:) 顺便说一句，欢迎来到 stackoverflow.com
它解决了冻结问题，但我认为如果我不转储到控制台，性能足以直接进行所有计算而不会冻结。

【解决方案2】：

尝试创建一个 1px X 1px 的画布，移动图像然后读取 imageData

【讨论】：