Загрузка фотографий IOS6 и Safari - Файловый API + Canvas + jQuery Ajax Загрузка и изменение размера файлов асинхронно

IOS6 был выпущен, и я тестировал загрузку фотографий.

Это работает хорошо, но с большими изображениями через 3G это МЕДЛЕННО, как и ожидалось.

Благодаря File API и Canvas можно изменять размеры изображений с помощью JavaScript. Я надеюсь, что, если я изменю размеры изображений, прежде чем я попытаюсь загрузить их, они будут загружаться быстрее, что обеспечивает быстрый пользовательский опыт. Поскольку процессоры смартфонов улучшаются в геометрической прогрессии быстрее, чем скорость сети, я считаю, что это решение является победителем.

Николас предложил отличное решение для изменения размера изображения:

Размер изображения перед загрузкой

Однако мне тяжело реализовать его с помощью jQuery's Ajax. Любой совет или помощь приветствуются, так как этот код, вероятно, будет чрезвычайно полезен для разработки мобильных веб-приложений после 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);

Ответы на вопрос(3)

Ваш ответ на вопрос