массив цикла jQuery с содержимым div внутри с html2canvas

Question

У меня есть массив под названием listArray(), который содержит два свойства pageNumber и content.

Недвижимость content содержит контейнер div html. Это полезно, потому что у меня есть разбиение на страницы, и я не сохраняю эту информацию в базе данных в реальном времени, вместо этого я вставляю в массив и только в конце - это когда я вставляю в базу данных.

$container = $('#container'); 

$.each(listArray, function(index, value){ 

    // So, for each index in array 
    // it must empty the container 
    // to receive a new value 
    $container.empty(); 
    $container.append(value.content); // value.content = pure html  

    html2canvas($container, { 
     height: $container.height() + 180, 
     onrendered: function(canvas) { 

      var data = canvas.toDataURL('image/png');   
      var file = dataURLtoBlob(data); 

      var formObjects = new FormData(); 
      formObjects.append('file', file); 

      $.ajax({ 
       url: 'ajax_saveImage', 
       type: 'POST', 
       data: formObjects, 
       processData: false, 
       contentType: false, 
      }); 
     } 
    }); 
}); 

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

Answer 1

Решено.

Решение не было циклом, но вместо этого вызывало функцию количеством требуемого времени. Решение пришло мне в голову после просмотра этой темы Looping html2canvas

var i = 0; 

function saveIt(){ 
    $container.empty(); 

    if(i <= listArray.length - 1){ 

     $container.append(listArray[i]['content']); 

     html2canvas($container, { 
      height: $container.height() + 180, 
      letterRendering: true, 
      onrendered: function(canvas) { 

       var data = canvas.toDataURL('image/png');   
       var file = dataURLtoBlob(data); 

       var formObjects = new FormData(); 
       formObjects.append('file', file); 

       $.ajax({ 
        url: 'ajax_saveImage', 
        type: 'POST', 
        data: formObjects, 
        processData: false, 
        contentType: false, 
       }); 

       i++; 
       saveIt(); // Important! - call the function again 
      } 
     }); 
    } 
}