Получение данных изображения с холста

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 с

Что может быть ошибкой?

Answer 1

Причина в том, что вы не дожидаетесь завершения загрузки изображения (загрузка изображений является асинхронной), поэтому вы выполняете итерацию данных изображения до того, как обратный вызов нагрузки будет вызван, чтобы изображение никогда не рисовалось до холста до этого.

При перемещении итерации внутри обработчика нагрузки он должен работать:

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

Answer 2

Следующая отлично работает для меня:

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

Может быть, вы забыли нарисовать что-нибудь на холсте, или в область холста вы проверяете?