JavaScript: obtenha as dimensões da imagem

95

Eu só tenho um URL para uma imagem. Preciso determinar a altura e a largura desta imagem usando apenas JavaScript. A imagem não pode ser visível para o usuário na página. Como posso obter suas dimensões?

javascript html image

— JQueeeer
fonte

2

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

1

na verdade, esta resposta é a única realmente correta, já que você tem que esperar até que a imagem seja carregada.

— Shadow Wizard is Ear For You

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
fonte

1

A menos que você precise obter as dimensões de forma síncrona. Nesse caso, você apenas precisa inserir a imagem no documento (usando uma posição absoluta em algum lugar fora da janela de visualização) - então, as dimensões estarão disponíveis logo após a chamada de document.appendChild ().

— JustAndrei

1

Por que é onloadantes de definir o url da imagem?

— Ajay Gaur

23

@AjayGaur porque onloadé um ouvinte que será chamado de forma assíncrona se a imagem for carregada corretamente. Se você definir o ouvinte depois de definir o url, a imagem poderá ser carregada antes que o código alcance a configuração do próprio onload, resultando no ouvinte nunca ser chamado. Usando analogias, se você está servindo um copo com água para si mesmo, primeiro despeja a água e depois coloca o copo para enchê-lo? Ou você primeiro coloca o copo e depois despeja a água?

— biomorgoth

2

img.naturalWidth e img.naturalHeight são a resposta correta

— Kamlesh

Obrigado @Kamlesh eu precisava das dimensões naturais.

— jahooma

43

Faça um novo Image

var img = new Image();

Colocou o src

img.src = your_src

Obtenha o widthe oheight

//img.width
//img.height

— nc3b
fonte

17

Continuo obtendo 0 para largura e altura, usando esse código exato.

— Adam Casey de

11

Parece que a imagem tem que carregar, o que faz sentido.

— Adam Casey de

3

informações adicionais - embora isso tenha funcionado para mim na primeira vez, era intermitente. Acho que o problema é porque a imagem não foi baixada. Consertei executando o código que usa a dimensão no manipulador de eventos onload da seguinte maneira: img.onload = function () {};

— Shumii

3

Este código funciona, desde que a imagem esteja no cache do navegador. Uma vez que o cache é inválido ou excluído. Não vai funcionar. Portanto, não é realmente confiável.

— bharatesh

2

Isso não está funcionando, já que a imagem ainda não foi carregada - o carregamento da imagem é feito de forma assíncrona, então você deve esperar pelo evento de carregamento.

— user1702401

5

Isso usa a função e aguarda sua conclusão.

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
fonte

1

Por que essa função reutilizável com adiamentos seria rejeitada ?!

— DavidDunham

'usando apenas JavaScript' e isto é jQuery, eu acho

— Apolo

Você recebe upvote de mim, embora esteja usando jQuerry. A abordagem é o que importa.

— Krankuba de

2

naturalWidth e 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%; }

— Azul amargo
fonte

1

se você tiver um arquivo de imagem do formulário de entrada. você pode usar assim

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
fonte

0

Pergunta semelhante feita e respondida usando JQuery aqui:

Obtenha a altura da largura da imagem remota do 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
fonte

0

Obtenha o tamanho da imagem com jQuery

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

Obtenha o tamanho da imagem com JavaScript

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

Obtenha o tamanho da imagem com JavaScript (navegadores modernos, IE9 +)

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

Use o acima simplesmente como: getMeta (" http://example.com/img.jpg ");

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

— Sunny Mahajan
fonte

-3

O código a seguir adiciona o atributo de imagem de altura e largura a cada imagem na página.

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

13

A questão era obter as dimensões da imagem sem mostrar a imagem ao usuário. Definir os atributos de largura e altura da imagem após a exibição da imagem não faz absolutamente nenhum sentido.

— Yaroslav Stavnichiy