IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously

Question

IOS6 has been released and I've been testing photo uploading.

It works well, but with larger images over 3G it is SLOW as expected.

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.

Nicolas has offered an excellent solution for image resizing:

Image resize before upload

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.

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 > imageHeight) {
            if (imageWidth > maxWidth) {
                imageHeight *= maxWidth / imageWidth;
                imageWidth = maxWidth;
            }
        } else {
            if (imageHeight > 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);

Answer 1

I've just developed a jQuery plugin for client side canvas image resizing. It also handles orientation and the iOS6 squashed image issue.

You can try: http://gokercebeci.com/dev/canvasresize

Usage:

$.canvasResize(file, {
               width   : 300,
               height  : 0,
               crop    : false,
               quality : 80,
               callback: function(dataURL, width, height){

                         // your code

               }
});