我需要在javascript中处理1000x1000px * .bmp图像(~1MiB)中的pixeldata
目前我有点卡住,因为当我尝试将数据转储到控制台时页面冻结.
到目前为止重要的代码：
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img,0);
console.log(context.getImageData(0,canvas.height,canvas.width);
我想这是一个性能问题,但是有更好的方法来访问像素数据吗？我真的不需要一次阅读所有内容,逐个读取像素也没关系.
编辑：
这里是更新的代码,它将使用图片的红色值填充二维数组(我正在处理黑白图片,这样就足够了)
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img,0);
var imgData = context.getImageData(0,canvas.width);
var pixel = new Array();
for(i=0;i没有性能问题:)只有quirk是行/列是颠倒的
最佳答案
var data = context.getImageData(0,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
})();
