Wie kann ich die Größe von Bildern clientseitig mithilfe von JavaScript ohne Plugins ändern?

Clientseitige Größenänderung von Bildern mit JavaScript

Bildbearbeitung ist ein entscheidender Aspekt der Webentwicklung, und die effiziente Größenänderung von Bildern ist für die Optimierung der Benutzererfahrung und Website-Leistung unerlässlich. Flash wurde traditionell für die Größenänderung von Bildern verwendet, aber mit Fortschritten in JavaScript ist es jetzt möglich, die Größe von Bildern clientseitig zu ändern, ohne dass zusätzliche Plugins erforderlich sind.

Für Entwickler, die eine Open-Source-Lösung für die Größenänderung von Bildern suchen JavaScript, die folgenden Ressourcen bieten robuste und zuverlässige Optionen:

Github Gist:

Dieser Gist bietet sowohl ES6- als auch JavaScript-Versionen eines Bildgrößenänderungsalgorithmus: https:// gist.github.com/dcollien/312bce1270a5f511bf4a.

Verwendung:

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:

• Unterstützt die Größenänderung verschiedener Bildformate.
• Enthält Polyfills, um die Kompatibilität mit älteren Browsern sicherzustellen.
• Ignoriert animierte GIFs aus Kompatibilitätsgründen.

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