IOS6 e Safari Photo Upload - API de arquivo + Canvas + jQuery Ajax Fazendo upload e redimensionando arquivos de forma assíncrona

O IOS6 foi lançado e estou testando o upload de fotos.

Funciona bem, mas com imagens maiores em 3G é LENTO como esperado.

Graças à API de arquivos e ao Canvas, é possível redimensionar imagens usando JavaScript. Espero que, se eu redimensionar as imagens antes de tentar enviá-las, elas serão enviadas com mais rapidez - permitindo uma rápida experiência do usuário. Com os processadores para smartphones melhorando exponencialmente mais rápido que as velocidades da rede, acredito que esta solução seja uma vencedora.

Nicolas ofereceu uma excelente solução para redimensionamento de imagens:

Redimensionamento de imagem antes do upload

No entanto, estou tendo mais dificuldade em implementá-lo com o Ajax do jQuery. Qualquer conselho ou ajuda é apreciado, já que este código provavelmente será extremamente útil para o desenvolvimento de aplicativos da web para dispositivos móveis pós-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);

questionAnswers(3)

yourAnswerToTheQuestion