Bildkomprimierungs-Upload-Funktion für die mobile HTML5-Entwicklung

Beim Hochladen von Bildern auf das mobile Endgerät laden Benutzer im Allgemeinen Bilder aus dem Mobiltelefonalbum hoch. Die Aufnahmequalität von Mobiltelefonen wird im Allgemeinen immer höher, daher beträgt die Größe eines einzelnen Fotos um vor dem Hochladen eine lokale Verarbeitung durchzuführen. Im Folgenden stellt Ihnen der Herausgeber von Script House die Bildkomprimierungs- und Upload-Funktion für die mobile HTML5-Entwicklung vor. Freunde, die sich für die Bildkomprimierungs- und Upload-Funktion für HTML5 interessieren, sollten sich die H5-Aktivitäten ansehen Das Formular besteht darin, Benutzern die Teilnahme durch das Hochladen von Bildern zu ermöglichen. Beim Hochladen von Bildern auf das mobile Endgerät laden Benutzer normalerweise Bilder aus dem Mobiltelefonalbum hoch. Heutzutage wird die Aufnahmequalität von Mobiltelefonen immer höher und die Größe eines einzelnen Fotos liegt im Allgemeinen bei etwa 3 Millionen. Wenn Sie es direkt hochladen, verbraucht es viel Verkehr und die Erfahrung ist nicht gut. Daher muss vor dem Hochladen eine lokale Komprimierung durchgeführt werden.

Als nächstes werden wir die Bildkomprimierungs- und Upload-Funktion bei der Entwicklung von h5-Aktivitäten zusammenfassen, einige Fallstricke markieren, auf die wir gestoßen sind, und sie mit allen teilen: Ein Muss für Anfänger

Wenn Sie keine Ahnung vom mobilen Hochladen von Bildern haben, müssen Sie die drei Konzepte FileReader, Blob und FormData hinzufügen.

1.FileReader

Definition

Mit dem FileReader-Objekt kann eine Webanwendung den Inhalt von Dateien (oder Rohdatenpuffern) asynchron lesen Verwenden Sie das Dateiobjekt oder das Blob-Objekt, um die zu verarbeitende Datei oder die zu verarbeitenden Daten anzugeben 🎜>

Verwenden Sie

2.Blob

BLOB (binäres großes Objekt), ein binäres großes Objekt ist ein Container, der Binärdateien speichern kann.

3.FormData

Mit dem FormData-Objekt können Sie eine Reihe von Schlüssel-Wert-Paaren verwenden, um ein vollständiges Formular zu simulieren, und dann XMLHttpRequest verwenden, um dieses zu senden. Formular".

var fileReader = new FileReader();
fileReader.onload = function() {
    var url = this.result;
}
//or
fileReader.onload = function(e) {
    var url = e.target.result;
}

Hauptthema

Prozess zum Hochladen mobiler Bildkomprimierung:

1) Eingabedatei zum Hochladen des Bildes und Verwenden Sie FileReader, um die vom Benutzer hochgeladenen Bilder zu lesen.

2) Übergeben Sie die Bilddaten an das IMG-Objekt, zeichnen Sie das IMG auf die Leinwand und verwenden Sie dann canvas.toDataURL zur Komprimierung. Erhalten Sie die komprimierten Bilddaten im Base64-Format, konvertieren Sie sie in Binärdaten, und senden Sie sie schließlich über xmlHttpRequest >

2. Bilder komprimieren

3. Bilder hochladen

Plug-in zur Bestimmung der Richtung von Bildern, die mit dem iPhone aufgenommen werden: exif

Das obige ist der detaillierte Inhalt vonBildkomprimierungs-Upload-Funktion für die mobile HTML5-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!