Comment appliquer les limitations de dimension d'image à l'aide de JavaScript ?

Appliquer des limitations de dimension aux téléchargements d'images à l'aide de JavaScript

Dans le but de contrôler les téléchargements d'utilisateurs, vous devrez peut-être vérifier la largeur et la largeur de l'image. hauteur avant de les soumettre à un serveur. Cette fonctionnalité JavaScript fournit une solution élégante pour filtrer les images qui répondent à des critères spécifiés.

Pour y parvenir, nous créons un objet image à partir du fichier sélectionné à l'aide de l'API File. Voici comment cela fonctionne :

 function checkImageDimensions(target) {
   const file = target.files[0];

   // Create an image object to access its properties
   const img = new Image();
   const objectUrl = URL.createObjectURL(file);

   img.onload = function() {
     const width = this.width;
     const height = this.height;

     if (width > 240 || height > 240) {
       alert("Image dimensions exceed maximum (240x240)");
       return false;
     } else {
       // Image meets the dimension criteria
       // Continue with the upload process
       return true;
     }
   };

   img.src = objectUrl;
 }

 // Bind the event listener to the file input
 document.getElementById("photoInput").addEventListener("change", checkImageDimensions);

Dans ce script, nous :

1. Créons un objet image à partir du fichier téléchargé.
2. Attachez un écouteur d'événement de chargement à l'objet image.
3. Dans le gestionnaire d'événements de chargement, obtenez les dimensions de l'image et comparez-les au maximum spécifié.
4. Affichez une alerte si les dimensions sont dépassées, indiquant si l'image est acceptée ou non.

Cette approche garantit que les images téléchargées respectent les dimensions souhaitées, offrant ainsi une expérience utilisateur plus contrôlée et évitant d'éventuels problèmes d'affichage sur votre site Web.

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!