JavaScript: obtenir les dimensions de l'image

95

Je n'ai qu'une URL vers une image. Je dois déterminer la hauteur et la largeur de cette image en utilisant uniquement JavaScript. L'image ne peut pas être visible par l'utilisateur sur la page. Comment puis-je obtenir ses dimensions?

javascript html image JQueeeer
la source
2
stackoverflow.com/questions/106828/javascript-get-image-height
stecb
1
en fait, cette réponse est la seule vraiment correcte, car il faut attendre que l'image soit chargée.
Shadow Wizard est une oreille pour vous le

Réponses:

196 
var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;
Shumii
la source
1
Sauf si vous devez obtenir les dimensions de manière synchrone. Dans ce cas, il vous suffit d'insérer l'image dans le document (en utilisant une position absolue quelque part en dehors de la fenêtre) - alors les dimensions sont disponibles juste après avoir appelé document.appendChild ().
JustAndrei
1
Pourquoi est-ce onloadavant de définir l'url de l'image?
Ajay Gaur
23
@AjayGaur car onloadest un écouteur qui sera appelé de manière asynchrone si l'image est chargée correctement. Si vous définissez l'écouteur après avoir défini l'URL, l'image peut se charger juste avant que le code n'atteigne la configuration du chargement lui-même, ce qui fait que l'écouteur n'est jamais appelé. En utilisant des analogies, si vous vous servez un verre avec de l'eau, versez-vous d'abord l'eau et ensuite mettez-vous le verre pour le remplir? Ou mettez-vous d'abord le verre et ensuite vous versez l'eau?
biomorgoth
2
img.naturalWidth et img.naturalHeight est la bonne réponse
Kamlesh
Merci @Kamlesh j'avais besoin des dimensions naturelles.
jahooma
43

Faire un nouveau Image

var img = new Image();

Met le src

img.src = your_src

Obtenez le widthet leheight

//img.width
//img.height
nc3b
la source
17
Je continue à obtenir 0 pour la largeur et la hauteur, en utilisant ce code exact.
Adam Casey
11
Il semble que l'image doit se charger, ce qui est logique.
Adam Casey
3
informations supplémentaires - même si cela a fonctionné pour moi la première fois, c'était intermittent. Je pense que le problème est que l'image n'a pas été téléchargée. J'ai corrigé en exécutant le code qui utilise la dimension dans le gestionnaire d'événements onload comme ceci: img.onload = function () {};
Shumii
3
Ce code fonctionne, tant que l'image est dans le cache du navigateur. Une fois que le cache est invalide ou supprimé. Ça ne marchera pas. Donc pas vraiment fiable.
bharatesh
2
Cela ne fonctionne pas, car l'image n'est pas encore chargée - le chargement de l'image se fait de manière asynchrone, vous devez donc attendre l'événement de chargement.
user1702401
5

Cela utilise la fonction et attend qu'elle se termine.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});
DavidDunham
la source
1
Pourquoi cette fonction réutilisable avec des différés serait-elle rejetée?!
DavidDunham
'en utilisant uniquement JavaScript' et c'est jQuery, je suppose
Apolo
Vous obtenez un vote positif de ma part bien qu'il utilise jQuerry. L'approche est ce qui compte.
krankuba
2

naturalWidth et naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }
Bleu amer
la source
1

si vous avez un fichier image de votre formulaire d'entrée. tu peux utiliser comme ça

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}
Raka Adi Nugroho
la source
0

Obtenir la taille de l'image avec jQuery

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

Obtenir la taille de l'image avec JavaScript

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

Obtenir la taille de l'image avec JavaScript (navigateurs modernes, IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Utilisez simplement ce qui précède comme: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

Sunny Mahajan
la source
-3

Le code suivant ajoute la hauteur et la largeur de l' attribut d'image à chaque image de la page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>
Testere
la source
13
La question était d'obtenir les dimensions de l'image sans montrer l'image à l'utilisateur. La définition des attributs de largeur et de hauteur de l'image après que l'image a été affichée n'a absolument aucun sens.
Yaroslav Stavnichiy