title: Dont resolve promise until after images load
body: <p><strong>The below is supposed:</strong></p>
  
  <ul>
  <li>loop through a group of <code>img</code> tags</li>
  <li>grab each tag's <code>src</code> url</li>
  <li>convert it to a <code>base64</code> encoded string using a <code>HTML 5</code> <code>canvas</code></li>
  <li>once all images have been converted, the promise should be resolved and the callback called</li>
  </ul>
  
  <p><strong>My problem:</strong></p>
  
  <ul>
  <li>I need to wait for each image to load in the <code>canvas</code> before I can  convert it to <code>base64</code></li>
  <li>to solve this I used  `img.onload = function(){ ..... return base64Img; };</li>
  <li>Unfortunately, calling <code>img.src = element.src;</code> each time through resolves the promise, it doesn't wait for the images to load and call <code>return base64Img;</code> so I end up with an empty array when <code>$.when.apply($, promises).then(function(){});</code> is called.</li>
  </ul>
  
  <p><strong>How can I change this promise so that it does not resolve until all the images have been loaded and converted?</strong></p>
  
  <pre><code> function accountCreation(){
      $('#container').hide(); // hide the display while we save the info as it will take a few seconds, you should do a loading bar or something here instead
      var user = Parse.User.current(); // get the currently logged in user object
  
      // loop through each image element
      var promises = $('.images').map(function(index, element) {
            var src = $(element).attr('src');
            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function(){
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img,0,0);
                var base64Img = canvas.toDataURL('image/png');
                // Clean up
                canvas = null; 
                return base64Img;
            };
            img.src = element.src;
      });
      $.when.apply($, promises).then(function() {
          // arguments[0][0] is first result
          // arguments[1][0] is second result and so on
          for (var i = 0; i &lt; arguments.length; i++) {
              var file = new Parse.File("photo.jpg", { base64: arguments[i]}); // this part actually saves the image file to parse
              user.set("image" + i, file); // set this image to the corosponding column on our object 
          }
          // save the user object
          user.save(null,{
            success: function(user) { 
                    $('#message').html('Profile Updated!');
                    $('#container').show(); // show the screen again, you should just remove your loading bar now if you used one
            },
            error: function(user, error) {
                    console.log('Failed to create new object, with error code: ' + error.message);
            }
          });
      });
   }
  </code></pre>