drawImage в JavaScript (Canvas)

Question

У меня есть массив объектов изображения, которые содержат всю необходимую информацию, такую ​​как path, x, y, w, h. Теперь я хочу нарисовать все эти изображения на холсте в цикле. Но когда я это делаю, он рисует только первое изображение. Вот код:

for(var i=0; i<shapes.length; i++) 
{ 
    var A = shapes.pop(); 
    if(A.name == 'image' && A.pageNum == pNum) 
    { 
     var img = new Image(); 
     img.src = A.path; 
     img.onload = function() { 
      context.drawImage(img, A.x, A.y, A.w, A.h); 
     } 
    } 
} 

я проверил все данные в массиве формы ... внутри если условие, перед вызовом функции DrawImage, вся информация о каждом изображении является правильным, но по какой-то странной причине, что Безразлично» t отображает изображения, кроме «последнего» в массиве (тот, который всплывает последним)

Answer 1

Это была проблема какого-то закрытия ... вроде бы, цикл заканчивается перед загрузкой изображений или чем-то еще. Решение, которое сработало для меня, заключалось в том, чтобы поместить весь код загрузки изображения в отдельную функцию и вызвать эту функцию из цикла:

if(A.name == 'image' && A.pageNum == pNum) 
{ 
    displayImage(A.path, A.x, A.y, A.w, A.h); 

} 
function displayImage(path, x, y, w, h) 
{ 
    var img = new Image(); 
    img.src = path; 

    img.onload = function() { 
     context.drawImage(img, x, y, w, h); 
    } 
} 

Answer 2

Я не понимаю, почему вы используете pop() для получения данных объекта. Вы могли бы вместо того, чтобы получить доступ к каждому объекту с помощью фигур [I] обозначения и, в качестве бонуса, хранить изображения ручки в каждом объекте:

for(var i=0; i<shapes.length; i++) 
{ 
    if(shapes[i].name == 'image' && shapes[i].pageNum == pNum) 
    { 
     shapes[i].img = new Image(); 
     shapes[i].img.src = shapes[i].path; 
     shapes[i].img.onload = function() { 
      context.drawImage(shapes[i].img, shapes[i].x, shapes[i].y, shapes[i].w, shapes[i].h); 
     } 
    } 
} 

Answer 3

Ваша загрузка изображений код неисправности.

Для каждого изображения потребуется время для загрузки, и к тому времени вы перезаписали var img другим новым Image();

Вот пример загрузчика изображений, который выполняет только после того, как все изображения были загружены и готовы сделать:

[Warning: непроверенный код - некоторые корректировки могут быть необходимы! ]

// image loader 

var imageURLs=[]; // put the paths to your images in this array 
var imagesOK=0; 
var imgs=[]; 
imageURLs.push(""); 
loadAllImages(start); 

function loadAllImages(callback){ 
    for (var i=0; i<imageURLs.length; i++) { 
     var img = new Image(); 
     imgs.push(img); 
     img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length) { 
       callback(); 
      } 
     }; 
     img.onerror=function(){alert("image load failed");} 
     img.crossOrigin="anonymous"; 
     img.src = imageURLs[i]; 

     // note: instead of this last line, you can probably use img.src=shapes[i].path; 
    }  
} 

function start(){ 

    // the imgs[] array holds fully loaded images 
    // the imgs[] are in the same order as imageURLs[] 

    for(var i=0;i<shapes.length;i++){ 
     var shape=shapes[i]; 
     context.drawImage(imgs[i],shape.x,shape.y,shape.w,shape.h); 
    } 

}