title: Wait until canvas.toBlob() has finished?
body: <p>I'm converting multiple canvas elements to blobs with an <code>each()</code> loop, after which I send it to the server with AJAX.</p>
  
  <p>I ran into a rather odd issue, being that the rest of my script keeps executing even if <code>toBlob()</code> is seemingly still busy.</p>
  
  <pre><code>// Empty array for blobs
  var blobs = [];
  
  // Loop through cropped images
  myImages.each( function() {
      var thisImage = $(this);
  
      // Make canvas object from image
      thisImage.cropper('getCroppedCanvas', {
          'width': parseInt(thisImage.attr('data-width')),
          'height': parseInt(thisImage.attr('data-height'))
  
      // Create blob
      }).toBlob( function(blob) {
  
          // Add blob to blobs array
          blobs.push(blob);
  
      }, 'image/jpeg', 0.75);
  });
  
  console.log(blobs.length); // Returns 0
  
  if ( blobs.length &gt; 0 ) {
      console.log(blobs) // Does not execute because blobs has a length of 0
  }
  </code></pre>
  
  <p>The strange thing is, when I add a <code>setTimeout</code> around my <code>if</code> statement, it does execute.</p>
  
  <pre><code>setTimeout( function() {
  
      console.log(blobs.length); // Returns 2
  
      if ( blobs.length &gt; 0 ) {
          console.log(blobs); // Does execute
      }
  
  }, 5000);
  </code></pre>
  
  <p>How can I make sure the toBlob function has finished processing my blobs before attempting to send them to the server with AJAX?</p>