title: IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously
body: <p>IOS6 has been released and I've been testing photo uploading.</p>
  
  <p>It works well, but with larger images over 3G it is SLOW as expected.</p>
  
  <p>Thanks to File API and Canvas, it is possible to resize images using JavaScript. I hope that if I resize the images before I attempt to upload them, they will upload faster - lending itself to a speedy user experience. With smartphone processors improving exponentially faster than the network speeds, I believe this solution is a winner.</p>
  
  <p>Nicolas has offered an excellent solution for image resizing:</p>
  
  <p><a href="https://stackoverflow.com/questions/961913/image-resize-before-upload">Image resize before upload</a></p>
  
  <p>However, I am having the hardest time implementing it with jQuery's Ajax. Any advice or help is appreciated, as this code will probably be extremely useful for mobile web application development post-IOS6.</p>
  
  <pre><code>var fileType = file.type,
      reader = new FileReader();
  
  reader.onloadend = function () {
      var image = new Image();
      image.src = reader.result;
  
      image.onload = function () {
  
          //Detect image size
          var maxWidth = 960,
              maxHeight = 960,
              imageWidth = image.width,
              imageHeight = image.height;
          if (imageWidth &gt; imageHeight) {
              if (imageWidth &gt; maxWidth) {
                  imageHeight *= maxWidth / imageWidth;
                  imageWidth = maxWidth;
              }
          } else {
              if (imageHeight &gt; maxHeight) {
                  imageWidth *= maxHeight / imageHeight;
                  imageHeight = maxHeight;
              }
          }
  
          //Create canvas with new image
          var canvas = document.createElement('canvas');
          canvas.width = imageWidth;
          canvas.height = imageHeight;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
  
          // The resized file ready for upload
          var finalFile = canvas.toDataURL(fileType);
  
          if (formdata) {
  
              formdata.append("images[]", finalFile);
  
              $.ajax({
                  url: "upload.php",
                  type: "POST",
                  data: formdata,
                  dataType: 'json',
                  processData: false,
                  contentType: false,
                  success: function (res) {
                      //successful image upload
                  }
              });
  
          }
      }
  }
  reader.readAsDataURL(file);
  </code></pre>