Redimensionnement des images côté client avec JavaScript avant le téléchargement

Le redimensionnement des images côté client offre plusieurs avantages avant leur téléchargement sur le serveur. Il réduit la charge du serveur, accélère le rendu des pages et offre une meilleure expérience utilisateur.

Le redimensionnement des images JavaScript côté client est-il possible ?

Oui, il est possible de redimensionnez les images côté client à l'aide de JavaScript. Il existe des algorithmes open source qui permettent le redimensionnement sans recourir à Flash.

Algorithme de redimensionnement d'image côté client

Un de ces algorithmes est disponible sur GitHub : https : //gist.github.com/dcollien/312bce1270a5f511bf4a. Il comprend des versions en ES6 et en JavaScript Vanilla qui peuvent être intégrées dans n'importe quelle application Web.

Exemple d'utilisation

Pour utiliser l'algorithme :

1. Intégrez le code JavaScript fourni dans votre page Web.
2. Définissez une entrée pour la sélection de fichiers et spécifiez une balise d'image pour afficher l'image redimensionnée.
3. Dans l'écouteur d'événement onchange pour l'entrée, invoquez la fonction de redimensionnement fournie par l'algorithme. Spécifiez les dimensions souhaitées et une fonction de rappel.
4. La fonction de rappel recevra le blob redimensionné et un indicateur indiquant si le redimensionnement a réussi.
5. Utilisez le blob renvoyé pour définir l'attribut src du balise d'image pour prévisualiser l'image redimensionnée.

Caractéristiques

• Prend en charge ES6 et Vanilla JavaScript.
• Détecte automatiquement les fonctionnalités du navigateur. et applique des polyfills pour une compatibilité optimale.
• Ignore les images GIF animées pour conserver leur intégrité.