Como obter o tamanho da imagem (altura e largura) usando JavaScript?

Existe alguma API ou methods jQuery ou JS puro para obter as dimensões de uma imagem na página?

clientWidth e clientHeight são propriedades DOM que mostram o tamanho atual no navegador das dimensões internas de um elemento DOM (excluindo margem e borda). Portanto, no caso de um elemento IMG, isso obterá as dimensões reais da imagem visível.

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

Você pode obter a imagem de forma programática e verificar as dimensões usando 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'; 

Além disso (além das respostas de Rex e Ian) há:

 imageElement.naturalHeight 

e

 imageElement.naturalWidth 

Eles fornecem a altura e a largura do próprio arquivo de imagem (em vez de apenas o elemento de imagem).

Se você estiver usando o jQuery e estiver solicitando tamanhos de imagem, terá que esperar até que eles sejam carregados ou você só receberá zeros.

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

Acho que uma atualização para essas respostas é útil porque uma das respostas mais votadas sugere o uso de clientWidth e clientHeight, que acho que agora está obsoleto.

Fiz algumas experiências com o HTML5 para ver quais valores realmente são retornados.

Primeiro de tudo, usei um programa chamado Dash para obter uma visão geral da API da imagem. Ele afirma que height e width são a altura / largura renderizada da imagem e que naturalHeight e naturalWidth são a altura / largura intrínseca da imagem (e são apenas HTML5).

Eu usei uma imagem de uma linda borboleta, de um arquivo com altura 300 e largura 400. E esse Javascript:

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

Então eu usei este HTML, com CSS inline para a altura e largura.

  

Resultados:

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

Então eu mudei o HTML para o seguinte:

  

ou seja, usando atributos de altura e largura em vez de estilos inline

Resultados:

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

Então eu mudei o HTML para o seguinte:

  

ou seja, usando ambos os atributos e CSS, para ver qual tem precedência.

Resultados:

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

Usando o JQuery, você faz isso:

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

A coisa que todos os outros esqueceram é que você não pode verificar o tamanho da imagem antes de carregar. Quando o autor verifica todos os methods postados, ele provavelmente funcionará apenas no host local. Como o jQuery pode ser usado aqui, lembre-se de que o evento ‘ready’ é triggersdo antes que as imagens sejam carregadas. $ (‘# xxx’). width () e .height () devem ser triggersdos no evento onload ou posterior.

Você só pode fazer isso usando um retorno de chamada do evento de carregamento, pois o tamanho da imagem não é conhecido até que tenha terminado de carregar. Algo como o código abaixo …

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

Com jQuery library-

Use .width() e .height() .

Mais na largura de jQuery e na altura do jQuery .

Exemplo de código

 $(document).ready(function(){ $("button").click(function() { alert("Width of image: " + $("#img_exmpl").width()); alert("Height of image: " + $("#img_exmpl").height()); }); }); 
    

ok pessoal, eu acho que eu melhorei o código fonte para poder deixar a imagem carregar antes de tentar descobrir suas propriedades, caso contrário ele exibirá ‘0 * 0’, porque a próxima instrução teria sido chamada antes do arquivo ser carregado o navegador. Requer 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']); } 

Antes de usar o tamanho real da imagem, você deve carregar a imagem de origem. Se você usar o framework JQuery, poderá obter um tamanho de imagem real de maneira simples.

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

Essa resposta foi exatamente o que eu estava procurando (em jQuery):

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

Resposta do JQuery:

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

Simplesmente, você pode testar assim.

   

Você também pode usar:

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

Nicky De Maeyer perguntou depois de uma foto de fundo; Eu simplesmente recebo do css e substituo o “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())); } 
 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 ... 

Recentemente eu tive o mesmo problema para um erro no controle deslizante flex. A altura da primeira imagem foi diminuída devido ao atraso de carregamento. Eu tentei o seguinte método para resolver esse problema e está funcionando.

 // create image with a reference id. Id shall be used for removing it from the dom later. var tempImg = $(''); //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'; 

Isso lhe dará a altura em relação à largura que você definiu, em vez da largura original ou Zero.

Você pode aplicar a propriedade handler onload quando a página é carregada em js ou jquery assim: –

 $(document).ready(function(){ var width = img.clientWidth; var height = img.clientHeight; }); 
 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. 

Este é o meu método, espero que seja útil. 🙂

é importante remover a configuração interpretada pelo navegador do div pai. Então, se você quer a largura e a altura da imagem real, você pode simplesmente usar

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

Este é um exemplo do Projeto TYPO3, de onde preciso das propriedades reais da imagem para escalá-la com a relação correta.

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

este trabalho para visualização e upload de múltiplas imagens. se você tiver que selecionar para cada uma das imagens, uma por uma. Em seguida, copie e cole em toda a function de pré-visualização da imagem e valide !!!

Antes de adquirir os atributos do elemento, a página do documento deve estar onload:

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