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

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

0

Question similaire posée et répondue en utilisant JQuery ici:

Obtenir la hauteur de largeur de l'image distante à partir de l'URL

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

getMeta("http://page.com/img.jpg");

— Luke Knepper
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
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
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