javascript - Wie lade ich Bilder auf Mobilgeräten hoch? , und das Bild vor dem Hochladen auf eine bestimmte Größe komprimieren?

Wie lade ich Bilder auf dem Handy hoch? , und das Bild vor dem Hochladen auf eine bestimmte Größe komprimieren?

Antwortinhalt:

Wie lade ich Bilder auf dem Handy hoch? , und das Bild vor dem Hochladen auf eine bestimmte Größe komprimieren?

1. Wenn Sie für den asynchronen Upload weiterhin die direkte Datei-Upload-Methode verwenden möchten, können Sie HTML5 verwenden. FormData Informationen zu bestimmten Vorgängen finden Sie in diesem Blog. http://www.cnblogs.com/lhb25/...

2. Ich habe eine andere Möglichkeit, Bilder asynchron hochzuladen. Konvertieren Sie das Bild zunächst in eine Base64-Zeichenfolge und senden Sie die Base64-Zeichenfolge dann an den Server. Nachdem der Server sie empfangen hat, können Sie die Base64-Zeichenfolge mithilfe einer bestimmten API in Bildinhalte konvertieren. Das Folgende ist die spezifische Implementierungsmethode:

<code>var getObjectURL = function(file) {
        var url = null;   
        if (window.createObjectURL !== undefined) { // basic  
            url = window.createObjectURL(file);  
        } else if (window.URL !== undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file);  
        } else if (window.webkitURL !== undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file);  
        }  
        return url;
    }</code>

Die Methode

getObjectURL wird verwendet, um das Bilddateiobjekt in der eingehenden Eingabe in eine temporäre URL zu konvertieren, und diese URL gehört zur gleichen Domäne.

<code>var converImgTobase64 = function(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
        img.src = url;
    }</code>

Die

converImgTobase64-Methode besteht darin, die oben erhaltene URL zu übergeben und sie über die CanvasAPI in eine Base64-Zeichenfolge umzuwandeln. Beachten Sie, dass sich diese URL in derselben Domäne befinden darf und nicht domänenübergreifend sein darf. Daher ist getObjectURL diese Methode erforderlich.

Beispiel:

<code>var input = $("input[type=file]")[0],
    src = getObjectURL(input.files[0]);

converImgTobase64(src, function(base64Str) {
    //处理base64Str相关的callback，可以直接在这里发送ajax请求。
});
</code>

Der Code dieses Teils der Komponente befindet sich in einer meiner Util-Bibliotheken. Sie können gerne darauf verweisen und Vorschläge zur Korrektur machen~~~https://github.com/zero-mo/Br...

Zusätzlich gibt es für die Bildkomprimierung hier einen Vorgang, der auf canvas basiert. Sie können ihn ausprobieren.
http://www.cnblogs.com/xiao-y...

Das Folgende ist ein Zitat aus meiner vorherigen Antwort

Wenn die Kompatibilität mit IE nicht berücksichtigt wird, können Sie FileReader API verwenden, um die Datei zu lesen, um den Base64-Wert der Datei zu erhalten, der direkt zum Anzeigen des Bildes und verwenden Sie dann einige Plug-Ins, um das Bild zuzuschneiden. Laden Sie es dann auf den Server hoch und speichern Sie es
imgBase64 https://developer.mozilla.org...

http://www.jq22.com/jquery-in...

FileReader API 参考文档：
Was die Komprimierung betrifft, ist die Größe des zugeschnittenen Bildes natürlich viel kleiner als das OriginalbildjQuery 剪裁图片插件(支持移动端)：

Ursprüngliche Frageadresse: https://segmentfault.com/q/10...

Der Artikel, den ich gerade geschrieben habe:

https://segmentfault.com/a/11...

Verwenden Sie hauptsächlich die Auswahl der nativen HTML5-Dateiform, verwenden Sie dann das Plug-In zum Komprimieren und verwenden Sie es schließlich die vom Plug-in ausgegebenen FormData direkt hochladen.