generate images by looping using html2canvas

Question

In my page i have a multiple div blocks. When i generate image with html2canvas I need to know each element id, but console return every time the last block id. Can i get correct id?

for example

   <div class='myBlock' id= 'image24' data-id='24'> .....  </div>
   <div class='myBlock' id= 'image30' data-id='30'> .....  </div>
   <div class='myBlock' id= 'image32' data-id='32'> .....  </div>
   <div class='myBlock' id= 'image45' data-id='45'> .....  </div>
   <div class='myBlock' id= 'image58' data-id='58'> .....  </div>
   <div class='myBlock' id= 'image62' data-id='62'> .....  </div>

generation of images by HTML2Canvas

      $.each($(".thumbnailDetails"), function(){

        elId = $(this).attr('id');

        html2canvas($("#target"+elId), {
             onrendered: function(canvas) {
                .....generate Image ....
                console.log(elId); // always return last id
             }
        });


 I need to get for each image his own id, but i always get the last one.

Answer 1

the solution

  i      = 0;
  ids    = [];
  images = {};

  $("...").each(function() {
       ids = $(this).attr('data-id'); //returns each image id            
  });

  someFunction() {
       html2canvas($("#image"+ids[i]), {
          onrendered: function(canvas) {
              //generate canvas
              i++;

              if(i == ids.legth) {
                 //my ajax

              } else {
                 someFunction();

              }
          }
       });

  }

  someFunction();