從畫布獲取圖像數據

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