通过使用 html2canvas 循环生成图像

Question

在我的页面中，我有多个 div 块。 当我使用 html2canvas 生成图像时，我需要知道每个元素 id，但控制台每次都会返回最后一个块 id。 我可以得到正确的身份证吗？

例如

   <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>

通过 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

解决办法

  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();