Obtenir la hauteur / largeur de l'image en Javascript (idéalement sans charger l'image du tout)
Désolé si cela a déjà été posée, mais je ne le trouve pas si.
Je veux trouver la hauteur et la largeur d'un fichier d'image en Javascript. Je n'ai pas vraiment besoin de montrer l'image dans la page, juste à la hauteur et la largeur.
En ce moment j'ai le code suivant, mais c'est le retour de la hauteur et la largeur de 0 (dans Mozilla 5).
var img = new Image();
img.src = "./filename.jpg";
var imgHeight = img.height;
var imgWidth = img.width;
alert("image height = " + imgHeight + ", image width = " + imgWidth);
Le fichier existe certainement, c'est dans le même répertoire que le fichier HTML, et il n'a pas la hauteur et la largeur de 0 🙂
Ce que je fais mal?
source d'informationauteur Richard
Vous devez vous connecter pour publier un commentaire.
Si l'image n'est pas chargé, il n'aura pas de sa hauteur et de largeur. Vous devez attendre jusqu'à ce que l'image est complètement chargé d'inspecter son " taille. Peut-être quelque chose le long de ces lignes:
Le code suivant, vous obtiendrez la largeur/hauteur sans attendre que l'image se charge complètement, en le rendant nettement plus rapide que les autres solutions ici.
Pour les essais de changement de
abc123
dans l'image source à n'importe quelle chaîne de caractères aléatoires pour empêcher la mise en cache.Il y a un JSFiddle Démo.
La hauteur et la largeur des propriétés d'un élément de l'image (comme le offsetHeight et offsetWidth propriétés de n'importe quel élément),
de retour de 0 au lieu de la valeur réelle jusqu'à ce qu'il a été ajouté à un document (et si son style.attribut d'affichage n'est pas réglé sur "none").
Une façon courante de contourner cela est de l'affichage de l'image en dehors de la zone visible de votre page, vos utilisateurs ne pourront pas le voir, et de ses propriétés height et width sera de retour les valeurs réelles au lieu de 0.
Ensuite, vous devez retirer l'image du document.
Si vous vérifier ce lien ici est une méthode pour obtenir toutes les dimensions de l'image dans un répertoire avec PHP qui vérifie sans avoir à charger la page. Cela peut vous aider. Vous pouvez passer à votre js avec un
PHP Obtenir les dimensions des images en dir
Je pense que c'est une meilleure approche si vous ne voulez vraiment pas à charger les images