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

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 :

<code class="HTML"><input type="file" id="select">
<img id="preview"></code>

2. Ajoutez le code JavaScript ci-dessous :

<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>

Fonctionnalités et support

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

• Redimensionnement basé sur la largeur et la hauteur maximales spécifiées
• Détection de prise en charge et polyfills pour la compatibilité entre les navigateurs
• Exclusion des GIF animés pour plus d'efficacité

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!