Wie können Sie die Größe von Bildern clientseitig mit JavaScript ohne Flash ändern?

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 Open-Source-Algorithmus, der auf GitHub verfügbar ist (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:

<code class="HTML"><input type="file" id="select">
<img  id="preview" alt="Wie können Sie die Größe von Bildern clientseitig mit JavaScript ohne Flash ändern?" ></code>

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

<code class="JavaScript">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.
    });
};</code>

Funktionen und Support

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

• Größenänderung basierend auf der angegebenen maximalen Breite und Höhe
• Unterstützt Erkennung und Polyfills für Kompatibilität zwischen Browsern
• Ausschluss animierter GIFs aus Effizienzgründen

Das obige ist der detaillierte Inhalt vonWie können Sie die Größe von Bildern clientseitig mit JavaScript ohne Flash ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!