Kann JavaScript die Bildgröße clientseitig ändern, bevor es auf den Server hochgeladen wird?

Clientseitige Größenänderung von Bildern mit JavaScript vor dem Hochladen auf den Server

Einführung

Beim Umgang mit Bildern ist dies oft notwendig um ihre Größe an bestimmte Anforderungen anzupassen, bevor Sie sie auf einen Server hochladen. Während die Verwendung von Flash in der Vergangenheit für diese Aufgabe üblich war, unterstützen moderne Browser jetzt erweiterte JavaScript-basierte Bildgrößenänderungsfunktionen.

Clientseitige Bildgrößenänderung mit JavaScript

Das gibt es Sie müssen nicht auf komplizierte Flash-Implementierungen zurückgreifen, wenn ein robuster und quelloffener JavaScript-Algorithmus leicht verfügbar ist. So können Sie dieses leistungsstarke Tool nutzen:

Größenänderungsalgorithmus

Weitere Informationen zum Zugriff auf den JavaScript-Code zum Ändern der Bildgröße finden Sie in diesem GitHub-Gist: https://gist.github .com/dcollien/312bce1270a5f511bf4a

Verwendung

Führen Sie die folgenden Schritte aus, um die Größe eines Bildes vor dem Hochladen zu ändern:

1. Erstellen Sie ein Eingabefeld für Dateiauswahl (<input type="file" id="select">) und ein Bildelement (<img id="preview">) zum Anzeigen des in der Größe geänderten Bildes.
2. Bei der Dateiauswahl Rufen Sie ImageTools.resize() mit der Datei, den gewünschten Abmessungen und einer Rückruffunktion auf.
3. Im Rückruf erhalten Sie den in der Größe geänderten Blob und ein Flag, das angibt, ob die Größenänderung erfolgreich war.
4. Aktualisieren Sie die Bildquelle mit dem in der Größe geänderten Bild (falls erfolgreich).
5. Verwenden Sie den Blob, um das in der Größe geänderte Bild über XHR auf den Server hochzuladen.

Vorteile

Diese Lösung bietet mehrere Vorteile:

• Clientseitige Bildgrößenänderung, wodurch eine serverseitige Verarbeitung überflüssig wird.
• Plattformübergreifende Kompatibilität, Unterstützung einer breiten Palette Auswahl moderner Browser.
• Umfassende Unterstützung für verschiedene Bildformate.
• Robuste Funktionalität, einschließlich Unterstützung für animierte GIFs.

Das obige ist der detaillierte Inhalt vonKann JavaScript die Bildgröße clientseitig ändern, bevor es auf den Server hochgeladen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!