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

Existe-t-il des API ou des méthodes JavaScript ou jQuery pour obtenir les dimensions d'une image sur la page?

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.

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;

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

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());
    });
});

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

En utilisant JQuery, vous faites ceci:

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

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.

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

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>

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']);
}

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.

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())
})

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

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

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>

Réponse JQuery:

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

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.

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.

Vous pouvez aussi utiliser:

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

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()));
}

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;

 });

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>

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

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.

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. :)

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

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);
}

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