Comment obtenir la taille de l'image (hauteur et largeur) en utilisant JavaScript?


Réponses:


792

Vous pouvez obtenir l'image par programme et vérifier les dimensions en utilisant Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Cela peut être utile si l'image ne fait pas partie du balisage.


4
@ blo0p3r - l'image n'a pas besoin d'être chargée dans le DOM avant cela. Il charge l'image et déclenche la charge pour nous donner les dimensions. Au fait - Meilleure réponse ici !!
Vik

Je souhaite que vous puissiez également le faire avec un objet XMLHttpRequest.
PHearst

Comment puis-je utiliser ce code pour plusieurs (un tableau d'images)? Aurait probablement besoin de le combiner avec la meilleure réponse d'ici: stackoverflow.com/questions/4288759/… ?
Kozuch

Solution pour plusieurs images ici: stackoverflow.com/questions/19269834/…
Kozuch

2
img.onerror = function () {alert (0); // gestionnaire non trouvé}
Limitless isa

437

clientWidth et clientHeight sont des propriétés DOM qui affichent la taille actuelle dans le navigateur des dimensions internes d'un élément DOM (hors marge et bordure). Ainsi, dans le cas d'un élément IMG, cela obtiendra les dimensions réelles de l'image visible.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

33
@ Nicky a parfaitement raison. Il donne les dimensions de l'image telle qu'elle est rendue dans ce cas .
Rex M

8
@ Mat-visuel $.fn.widthet $.fn.height.
yckart

202
La bonne réponse est d'utiliser img.naturalWidth et img.naturalHeight
Octopus

5
document.getElementByIdest plus long à taper mais 10 fois plus rapide que $('#...')[0].
bfontaine

17
@RexM Sur Chrome 35, c'est 16 fois plus rapide: jsperf.com/document-getelementbyid-vs-jquery/5
bfontaine

335

De plus (en plus des réponses de Rex et Ian) il y a:

imageElement.naturalHeight

et

imageElement.naturalWidth

Ceux-ci fournissent la hauteur et la largeur du fichier image lui-même (plutôt que simplement l'élément image).


15
Ceci est désormais pris en charge dans IE9 et tous les navigateurs Web modernes.
Aaron

obtenir 0x0 lorsque l'image n'a pas terminé son chargement.
brk

1
J'utilise Chrome et cela ne fonctionne que si la taille de l'image dans le dom ne change pas une fois la page chargée.
Jonathan Czitkovics, le

Oui ... c'est ce que je fais. Et puis, par la suite, si la "largeur naturelle" ou la hauteur revient en tant que NaN, je reviens à l'autre méthode de la réponse précédente (récupère à nouveau l'image en tant que nouvelle Image (), puis récupère sa largeur et sa hauteur lors de l'événement onload. Plus lent, mais de cette façon, cela fonctionnera dans les navigateurs plus anciens comme IE8
Randy

au cas où vous voudriez savoir sur le support du navigateur caniuse.com/#feat=img-naturalwidth-naturalheight
ulmer-morozov

109

Si vous utilisez jQuery et que vous demandez des tailles d'image, vous devez attendre qu'elles se chargent ou vous n'obtiendrez que des zéros.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

La largeur et la hauteur sont-elles toujours disponibles dans le dispositif de prise de charge?
Anders Lindén

@ AndersLindén - voir l'encre ajoutée par Akseli pour l'événement de chargement. Il y a une section spécifique consacrée aux images. La réponse technique est «non», mais dans la pratique, je n'ai jamais eu de problème avec nos sites qui utilisent cette méthode.
mrtsherman

Mais si la réponse technique est non, elle est inutilisable? N'est-ce pas?
Anders Lindén

Est-il possible d'obtenir les attributs de l'image avant son chargement?
no nein

98

Je pense qu'une mise à jour de ces réponses est utile car l'une des réponses les mieux votées suggère d'utiliser clientWidthet clientHeight, qui je pense est désormais obsolète.

J'ai fait quelques expériences avec HTML5, pour voir quelles valeurs sont réellement retournées.

Tout d'abord, j'ai utilisé un programme appelé Dash pour obtenir un aperçu de l'API d'image. Il indique que heightet widthsont la hauteur / largeur rendue de l'image et que naturalHeightet naturalWidthsont la hauteur / largeur intrinsèque de l'image (et sont uniquement HTML5).

J'ai utilisé une image d'un beau papillon, à partir d'un fichier de hauteur 300 et de largeur 400. Et ce Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Ensuite, j'ai utilisé ce HTML, avec CSS en ligne pour la hauteur et la largeur.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Résultats:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

J'ai ensuite changé le code HTML comme suit:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

c'est-à-dire en utilisant des attributs de hauteur et de largeur plutôt que des styles en ligne

Résultats:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

J'ai ensuite changé le code HTML comme suit:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

c'est-à-dire en utilisant à la fois des attributs et du CSS, pour voir lequel est prioritaire.

Résultats:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

1
Pourquoi pensez-vous que clientHeight est obsolète?
Cactux

64

En utilisant JQuery, vous faites ceci:

var imgWidth = $("#imgIDWhatever").width();

63
Et si l'image n'a pas encore été chargée?
James Westgate

11
et si l'image est dans la propriété d'arrière-plan de la div? :)
NDM

3
@JamesWestgate Si l'image n'a pas encore été chargée, il n'y a aucun moyen de déterminer sa taille réelle. Vous pouvez cependant tenter de lire les attributs widthet heightde l' imgélément.
Tim

@Tim Vous pouvez le charger en arrière-plan et lorsqu'il est chargé, vous pouvez avoir ses dimensions
Odys

26

Ce que tous les autres ont oublié, c'est que vous ne pouvez pas vérifier la taille de l'image avant qu'elle ne se charge. Lorsque l'auteur vérifie toutes les méthodes publiées, cela ne fonctionnera probablement que sur localhost. Étant donné que jQuery peut être utilisé ici, n'oubliez pas que l'événement «ready» est déclenché avant le chargement des images. $ ('# xxx'). width () et .height () doivent être déclenchés dans l'événement onload ou version ultérieure.


9
Postez un code mis à jour, vous pouvez obtenir des votes positifs et même obtenir un badge d'inversion convoité!
James Westgate

1
@ Thinker, veuillez fournir votre solution car votre analyse semble correcte.
a20

5
Ce n'est pas une réponse. Juste un commentaire sur les autres réponses.
jeffdill2

20

Vous ne pouvez vraiment le faire qu'en utilisant un rappel de l'événement de chargement, car la taille de l'image n'est pas connue tant qu'elle n'a pas fini de se charger. Quelque chose comme le code ci-dessous ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

1
dans jquery, vous pouvez utiliser $ .proxy pour cela.
Jochem Van Der Spek

9

Avec la bibliothèque jQuery-

Utilisez .width()et .height().

Plus en largeur jQuery et en hauteur jQuery .

Exemple de code-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>


8

ok les gars, je pense que j'ai amélioré le code source pour pouvoir laisser l'image se charger avant d'essayer de découvrir ses propriétés, sinon il affichera '0 * 0', car la prochaine instruction aurait été appelée avant le chargement du fichier le navigateur. Nécessite jquery ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

8

En supposant, nous voulons obtenir les dimensions de l'image de <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Dimensions naturelles

el.naturalWidthet el.naturalHeightnous obtiendra les dimensions naturelles , les dimensions du fichier image.

Dimensions de disposition

el.offsetWidthet el.offsetHeightnous obtiendra les dimensions auxquelles l'élément est rendu sur le document.


4
Votez simplement les réponses existantes qui fournissent un contenu utile; ne copiez pas de plusieurs d'entre eux dans un nouveau; vous dupliquez alors simplement du contenu.
TylerH

7

Avant d'utiliser la taille réelle de l'image, vous devez charger l'image source. Si vous utilisez le framework JQuery, vous pouvez obtenir la taille réelle de l'image de manière simple.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

7

Cette réponse était exactement ce que je cherchais (dans jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

5

Vous pouvez avoir une fonction simple comme la suivante ( imageDimensions()) si vous ne craignez pas d'utiliser des promesses .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>


3

Réponse JQuery:

$height = $('#image_id').height();
$width  = $('#image_id').width();

3

J'ai pensé que cela pourrait être utile à certains qui utilisent Javascript et / ou Typescript en 2019.

J'ai trouvé ce qui suit, comme certains l'ont suggéré, incorrect:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

C'est correct:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Conclusion:

Utilisez img, non this, en onloadfonction.


img.src ci-dessus a une faute de frappe, devrait être "non: j'ai essayé de le modifier mais je ne peux pas parce que:" Les modifications doivent comporter au moins 6 caractères; y a-t-il autre chose à améliorer dans ce post? "Sinon, une solution très simple qui fonctionne parfaitement!
user2677034

Merci @ user2677034 pour l'avoir remarqué. Je n'ai pas vu ça. Je blâmerai le clavier d'Apple. Je plaisante ... C'était probablement ma faute. ; P
Brian

2

Récemment, j'ai eu le même problème pour une erreur dans le curseur flexible. La hauteur de la première image a été réduite en raison du délai de chargement. J'ai essayé la méthode suivante pour résoudre ce problème et cela a fonctionné.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

Cela vous donnera la hauteur par rapport à la largeur que vous définissez plutôt que la largeur d'origine ou zéro.


1

Vous pouvez aussi utiliser:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

1

Nicky De Maeyer a demandé après une image de fond; Je l'obtiens simplement du css et remplace le "url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

Je n'ai jamais compris l'utilisation de regexp pour cela lors de l'utilisation de jQuery. Puisque jQuery normalisera l'attribut pour vous, vous vous en sortirez très bien en utilisant s.substr(4,s.length-5), c'est au moins plus facile pour les yeux;)
Jonas Schubert Erlandsson

1

Vous pouvez appliquer la propriété du gestionnaire onload lorsque la page se charge en js ou jquery comme ceci: -

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

1

Simplement, vous pouvez tester comme ça.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

0
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

0

il est important de supprimer le paramètre interprété par le navigateur du div parent. Donc, si vous voulez la vraie largeur et hauteur de l'image, vous pouvez simplement utiliser

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Ceci est un exemple de projet TYPO3 de ma part où j'ai besoin des propriétés réelles de l'image pour la mettre à l'échelle avec la bonne relation.


0
var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

C'est ma méthode, j'espère que cela vous sera utile. :)


0
function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

ce travail pour l'aperçu et le téléchargement de plusieurs images. si vous devez sélectionner pour chacune des images une par une. Copiez et collez ensuite dans toute la fonction d'aperçu de l'image et validez !!!


0

Avant d'acquérir les attributs d'un élément, la page du document doit être en charge:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

0

il suffit de passer l'objet fichier img qui est obtenu par l'élément d'entrée lorsque nous sélectionnons le fichier correct, il donnera la hauteur et la largeur nette de l'image

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.