Hochladen von IOS6- und Safari-Fotos - Datei-API + Canvas + jQuery Ajax Asynchrones Hochladen und Ändern der Größe von Dateien

IOS6 wurde veröffentlicht und ich habe das Hochladen von Fotos getestet.

Es funktioniert gut, aber bei größeren Bildern über 3G ist es erwartungsgemäß LANGSAM.

Dank der Datei-API und Canvas ist es möglich, die Größe von Bildern mithilfe von JavaScript zu ändern. Ich hoffe, dass Bilder, deren Größe vor dem Hochladen geändert wird, schneller hochgeladen werden - was sich positiv auf die Benutzerfreundlichkeit auswirkt. Ich glaube, dass diese Lösung mit Smartphone-Prozessoren, die sich exponentiell schneller als die Netzwerkgeschwindigkeiten verbessern, ein Gewinner ist.

Nicolas hat eine hervorragende Lösung für die Größenänderung von Bildern angeboten:

Bildgröße vor dem Hochladen ändern

Es fällt mir jedoch am schwersten, es mit Ajax von jQuery zu implementieren. Jeder Rat oder jede Hilfe wird gebeten, da dieser Code wahrscheinlich für die Entwicklung mobiler Webanwendungen nach IOS6 äußerst nützlich sein wird.

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);

Antworten auf die Frage(3)

Ihre Antwort auf die Frage