Comment valider les dimensions de l'image avant de la télécharger avec JavaScript ?

Validation des dimensions de l'image avant le téléchargement avec JavaScript

Pour garantir que les utilisateurs respectent les directives de taille de l'image, il est essentiel de vérifier la largeur et la hauteur de l'image avant le téléchargement. .

Validation du fichier

Votre code existant valide le type et la taille du fichier. Pour ajouter des vérifications des dimensions de l'image, vous devez créer un objet image à partir du fichier téléchargé.

Utiliser createObjectURL()

La méthode createObjectURL() dans les navigateurs modernes vous permet pour créer un objet URL temporaire à partir du fichier. Vous pouvez ensuite charger l'image de manière asynchrone à l'aide d'un objet Image :

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

Considérations

• createObjectURL() n'est pris en charge que dans les navigateurs modernes comme Firefox, Chrome , et Opera.
• La méthode URL.revokeObjectURL() doit être appelée pour libérer l'URL temporaire une fois terminée.

Démo

Voir un exemple en direct ici : https://jsfiddle.net/4N6D9/1/

Remarque : Comme mentionné précédemment, cette approche est spécifique au navigateur et peut ne pas fonctionner de manière cohérente sur toutes les plates-formes. .

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!