Transfert de photos IOS6 et Safari - API de fichiers + Canvas + jQuery Ajax Téléchargement et redimensionnement de fichiers de manière asynchrone

IOS6 a été libéré et je l'ai testé chargement de la photo.

Il fonctionne bien, mais avec de grandes images sur les réseaux 3G, il est LENT comme prévu.

Grâce aux Fichiers de l'API et de la Toile, il est possible de redimensionner les images à l'aide de JavaScript. J'espère que si je redimensionner les images avant d'essayer de télécharger une d'elles, téléchargement plus vite - se prêtant à une rapide expérience de l'utilisateur. Avec le smartphone processeurs d'améliorer de façon exponentielle plus rapide que les vitesses de réseau, je crois que cette solution est un gagnant.

Nicolas a offert une excellente solution pour le redimensionnement d'image:

Image redimensionner avant de les télécharger

Cependant, je vais avoir le temps le plus difficile de la mettre en œuvre avec jQuery Ajax. Des conseils ou de l'aide est très appréciée, que ce code sera probablement extrêmement utiles pour l'application web mobile de développement 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);

source d'informationauteur TaylorMac