IOS6 ha sido lanzado y he estado probando la carga de fotos.

Funciona bien, pero con imágenes más grandes sobre 3G es LENTO como se esperaba.

Gracias a File API y Canvas, es posible cambiar el tamaño de las imágenes usando JavaScript. Espero que si cambio el tamaño de las imágenes antes de intentar cargarlas, se carguen más rápido, prestándose a una experiencia de usuario rápida. Con los procesadores de teléfonos inteligentes mejorando exponencialmente más rápido que las velocidades de red, creo que esta solución es un ganador.

Nicolas ha ofrecido una excelente solución para redimensionar imágenes:

Tamaño de la imagen antes de subir

Sin embargo, estoy teniendo dificultades para implementarlo con el Ajax de jQuery. Cualquier consejo o ayuda es apreciado, ya que este código probablemente será extremadamente útil para el desarrollo de aplicaciones web móviles 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);