javascript - 从 Canvas 获取图像数据

Question

我有两个函数来显示 Canvas 中的图像数据，其中包含一些图像。

这有效

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');
            }
        }

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

可能是什么错误？

Answer 1

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

如果将迭代移至负载处理程序内，它应该可以工作:

$(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');
        }
    }
});