Bildgrößenänderung auf der Clientseite mit JavaScript: Eine Open-Source-Lösung

In der heutigen Webentwicklungslandschaft ist es oft wünschenswert, die Größe von Bildern vorher auf der Clientseite zu ändern Hochladen auf den Server. Dieser Ansatz kann die Bildqualität optimieren, die Serverlast reduzieren und das Benutzererlebnis verbessern, indem die Seitenladezeiten beschleunigt werden.

Während Flash eine gängige Option für die Größenänderung von Bildern ist, verzichten viele Entwickler lieber auf dessen Verwendung. Glücklicherweise gibt es eine Lösung, die JavaScript nutzt, um die Größe von Bildern effektiv zu ändern.

Open-Source-Algorithmus zur Größenänderung von Bildern

Der auf GitHub verfügbare Open-Source-Algorithmus (https://gist .github.com/dcollien/312bce1270a5f511bf4a) bietet eine zuverlässige Methode zur clientseitigen Größenänderung von Bildern. Es bietet eine ES6-Version und eine .js-Version, die in Skript-Tags eingebunden werden können.

Implementierung

Um den Größenänderungsalgorithmus zu implementieren, befolgen Sie diese Schritte:

1. Fügen Sie den HTML-Code wie unten gezeigt hinzu:

2. Fügen Sie den folgenden JavaScript-Code hinzu:

document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};

Funktionen und Unterstützung

Der Algorithmus verfügt über eine Reihe von Funktionen und Unterstützung, darunter:

• Größenänderung basierend auf der angegebenen maximalen Breite und Höhe
• Unterstützt Erkennung und Polyfills für browserübergreifende Kompatibilität
• Ausschluss animierter GIFs für mehr Effizienz