Databases
StackOverflow2013
Postsdbo
POIOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload