Przesyłanie zdjęć w IOS6 i Safari - API plików + Canvas + jQuery Ajax Przesyłanie i zmiana rozmiaru plików asynchronicznie

IOS6 został wydany i testowałem przesyłanie zdjęć.

Działa dobrze, ale z większymi obrazami w 3G jest WOLNY zgodnie z oczekiwaniami.

Dzięki File API i Canvas możliwe jest zmienianie rozmiaru obrazów przy użyciu JavaScript. Mam nadzieję, że jeśli zmienię rozmiar zdjęć, zanim spróbuję je przesłać, będą przesyłane szybciej - dzięki czemu użytkownik będzie mógł szybciej się z nimi zapoznać. Ponieważ procesory smartfonów poprawiają się wykładniczo szybciej niż prędkości sieciowe, uważam, że to rozwiązanie jest zwycięzcą.

Nicolas zaproponował doskonałe rozwiązanie do zmiany rozmiaru obrazu:

Zmień rozmiar obrazu przed przesłaniem

Jednak najtrudniej jest mi go wdrożyć z Ajaxem jQuery. Każda rada lub pomoc jest mile widziana, ponieważ ten kod będzie prawdopodobnie bardzo przydatny w tworzeniu aplikacji mobilnych po 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