Redimensionnement d'images côté client avec JavaScript : une solution Open Source

Dans le paysage actuel du développement Web, il est souvent souhaitable de redimensionner les images côté client avant en les téléchargeant sur le serveur. Cette approche peut optimiser la qualité de l'image, réduire la charge du serveur et améliorer l'expérience utilisateur en accélérant les temps de chargement des pages.

Bien que Flash soit une option courante pour le redimensionnement des images, de nombreux développeurs préfèrent éviter son utilisation. Heureusement, il existe une solution qui utilise JavaScript pour redimensionner efficacement les images.

Algorithme de redimensionnement d'image open source

L'algorithme open source disponible sur GitHub (https://gist .github.com/dcollien/312bce1270a5f511bf4a) fournit une méthode fiable pour redimensionner les images côté client. Il propose une version ES6 et une version .js qui peuvent être incluses dans les balises de script.

Implémentation

Pour implémenter l'algorithme de redimensionnement, suivez ces étapes :

1. Ajoutez le code HTML comme indiqué ci-dessous :

2. Ajoutez le code JavaScript ci-dessous :

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

Fonctionnalités et support

L'algorithme offre une gamme de fonctionnalités et de support, notamment :

• Redimensionnement basé sur la largeur maximale spécifiée et hauteur
• Prise en charge de la détection et des polyfills pour une compatibilité entre les navigateurs
• Exclusion des GIF animés pour plus d'efficacité