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

Die clientseitige Größenänderung von Bildern bietet mehrere Vorteile vor dem Hochladen auf den Server. Es reduziert die Serverlast, beschleunigt das Rendern von Seiten und bietet ein besseres Benutzererlebnis.

Ist eine clientseitige Größenänderung von JavaScript-Bildern möglich?

Ja, das ist möglich Ändern Sie die Größe von Bildern clientseitig mithilfe von JavaScript. Es stehen Open-Source-Algorithmen zur Verfügung, die eine Größenänderung ermöglichen, ohne auf Flash zurückgreifen zu müssen.

Algorithmus für die clientseitige Bildgrößenänderung

Ein solcher Algorithmus ist auf GitHub verfügbar: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. Es enthält Versionen in ES6 und Vanilla JavaScript, die in jede Webanwendung eingebettet werden können.

Beispielverwendung

So verwenden Sie den Algorithmus:

1. Betten Sie den bereitgestellten JavaScript-Code in Ihre Webseite ein.
2. Definieren Sie eine Eingabe für die Dateiauswahl und geben Sie ein Bild-Tag für die Anzeige des in der Größe geänderten Bildes an.
3. Im Onchange-Ereignis-Listener für die Eingabe Rufen Sie die vom Algorithmus bereitgestellte Größenänderungsfunktion auf. Geben Sie die gewünschten Abmessungen und eine Rückruffunktion an.
4. Die Rückruffunktion empfängt den Blob mit geänderter Größe und ein Flag, das angibt, ob die Größenänderung erfolgreich war.
5. Verwenden Sie den zurückgegebenen Blob, um das src-Attribut des festzulegen Bild-Tag zur Vorschau des in der Größe geänderten Bildes.

Funktionen

• Unterstützt sowohl ES6 als auch Vanilla JavaScript.
• Erkennt automatisch Browserfunktionen und wendet Polyfills für optimale Kompatibilität an.
• Ignoriert animierte GIF-Bilder, um ihre Integrität zu wahren.