从画布获取图像数据

Question

我有两个功能来显示画布中的图像数据，其中包含一些图像。

这有效

var canvasElement = document.getElementById("Canvas"),
canvas = canvasElement.getContext("2d");

canvas.fillStyle = "#ff6633"
canvas.fillRect(0,0,200,200);

for(x=0;x<200;x=x+10){
   for(y=0;y<200;y=y+10){
   p = canvas.getImageData(x, y, 1, 1).data;
   console.log(p[0] + " " + p[1] + ' '+p[2]+' ' +p[3]);
  }
}

但事实并非如此

var canvasElement2 = document.getElementById("Canvas2"),
canvas2 = canvasElement.getContext("2d");

var image = new Image();  
image.src = "b.png";  

$(image).load(function() {  
       canvas2.drawImage(image, 0, 0,200,200);  
});

canvas2.drawImage(image, 0, 0,200,200); 

for(x=0;x<200;x=x+10){
          for(y=0;y<200;y=y+10){
                var p = canvas2.getImageData(x, y, 1, 1).data;
                document.write(p[0] + " " + p[1] + ' '+' '+p[2]+' ' +p[3] +';\n');
            }
        }

第一种方法工作正常，但在第二种方法中，虽然画布上显示的图像，所有函数返回的是0 0 0 0 s的流

可能是什么错误？

Answer 1

以下工作对我来说很好：

var canvasElement = document.getElementById("text"),
    canvas = canvasElement.getContext("2d"),
    x, y, p;

canvas.fillStyle = "#ff6633"
canvas.fillRect(0,0,200,200);

for(x=0;x<200;x=x+10){
  for(y=0;y<200;y=y+10){
    p = canvas.getImageData(x, y, 1, 1).data;
    console.log(p[0] + " " + p[1] + ' '+p[2]+' ' +p[3]);
  }
}

也许你忘记在画布上绘制任何东西，或者进入你正在检查的画布区域？

Answer 2

原因是您没有等待图像完成加载（加载图像是异步的），因此您在调用加载回调之前迭代图像数据，因此在此之前图像永远不会被绘制到画布。

如果你在加载处理程序中移动迭代它应该工作：

$(image).load(function() {

    canvas2.drawImage(image, 0, 0,200,200);  

    for(var x=0;x<200;x=x+10){
        for(var y=0;y<200;y=y+10){
           var p = canvas2.getImageData(x, y 1, 1).data;
            document.write(p[0] + " " + p[1] + ' '+' '+p[2]+' ' +p[3] +';\n');
        }
    }
});