Comment redimensionner des images côté client à l'aide de JavaScript sans plugins ?

Redimensionner les images côté client à l'aide de JavaScript

La manipulation d'images est un aspect crucial du développement Web, et le redimensionnement efficace des images est essentiel pour optimiser l'expérience utilisateur et les performances du site Web. Flash est traditionnellement utilisé pour le redimensionnement des images, mais grâce aux progrès de JavaScript, il est désormais possible de redimensionner les images côté client sans avoir besoin de plugins supplémentaires.

Pour les développeurs recherchant une solution open source pour redimensionner les images dans JavaScript, les ressources suivantes fournissent des options robustes et fiables :

Github Gist :

Ce résumé propose les versions ES6 et JavaScript d'un algorithme de redimensionnement d'image : https:// gist.github.com/dcollien/312bce1270a5f511bf4a.

Utilisation :

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.
    });
};

Caractéristiques :

• Prend en charge le redimensionnement de divers formats d'image.
• Inclut les polyfills pour garantir la compatibilité avec les anciens navigateurs.
• Ignore les GIF animés pour des raisons de compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!