Determinar o tamanho original da imagem no navegador cruzado?

90

Existe uma maneira confiável e independente de estrutura de determinar as dimensões físicas de um <img src='xyz.jpg'>redimensionado no lado do cliente?

javascript image Pekka
fonte
img.onload = function () {console.log(img.height, img.width)}
neaumusic

Respostas:

130

Você tem 2 opções:

Opção 1:

Retire os widthe heightatributos e ler offsetWidtheoffsetHeight

Opção 2:

Crie um Imageobjeto JavaScript , defina o srce leia o widthe height(você nem mesmo precisa adicioná-lo à página para fazer isso).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

Edit by Pekka : Conforme combinado nos comentários, mudei a função para rodar no evento ´onload´ da imagem. Caso contrário, com imagens grandes, heighte widthnão retornaria nada porque a imagem ainda não foi carregada.

Gabriel McAdams
fonte
Isso não funcionará com imagens que ainda não foram carregadas. Pode valer a pena ajustá-lo para funcionar corretamente para outras pessoas que tenham encontrado esta resposta.
James
11
@Gabriel, estou usando isso, mas com uma newImg.onloadfunção para garantir que a imagem seja carregada quando eu definir a largura / altura. Você está bem comigo editando sua resposta de acordo?
Pekka
2
Apenas uma observação lateral: o Chrome / OSX pode ter problemas com imagens em cache onde você obtém 0 como altura / largura usando esta técnica.
David Hellsing
2
Como posso obter o retorno de altura e largura ... ?? porque essas variáveis ​​não estão saindo do onload
jack
5
@GabrielMcAdams, se você adicionar if(newImg.complete || newImg.readyState === 4) newImg.onload();no final de sua função, isso corrigirá o problema no Chrome / OSX que faz com que o onload não seja acionado quando as imagens são carregadas do cache.
Prestaul
101

As imagens (pelo menos no Firefox) têm uma naturalWidthpropriedade / height para que você possa usar img.naturalWidthpara obter a largura original

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

Fonte

Bugster
fonte
8
Funciona no Chrome também
bcoughlan
4
Este tópico ainda é relevante em 2013. Aqui está um link com uma ótima solução alternativa para o IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie
BurninLeo
4
Esta é a resposta vencedora em 2018. Funciona em qualquer lugar. (Por tabela de compatibilidade de navegador em MDN.)
7vujy0f0hy
3

Você pode pré-carregar a imagem em um objeto Imagem javascript e, em seguida, verificar as propriedades de largura e altura desse objeto.

Myles
fonte
Claro - eu não tenho que colocá-lo no documento. Vou fazer assim, felicidades!
Pekka
3 
/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) {
    /* element - DOM element */

    /* For FireFox & IE */
    if(     element.width != undefined && element.width != '' && element.width != 0){
        this.width  =   element.width;
    }
    /* For FireFox & IE */
    else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){
        this.width  =   element.clientWidth;
    }
    /* For Chrome * FireFox */
    else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){
        this.width  =   element.naturalWidth;
    }
    /* For FireFox & IE */
    else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){
        this.width  =   element.offsetWidth;
    }       
        /*
            console.info(' widthWidth width:',      element.width);
            console.info(' clntWidth clientWidth:', element.clientWidth);
            console.info(' natWidth naturalWidth:', element.naturalWidth);
            console.info(' offstWidth offsetWidth:',element.offsetWidth);       
            console.info(' parseInt(this.width):',parseInt(this.width));
        */
    return parseInt(this.width);

}   

var elementWidth    = widthCrossBrowser(element);
romano
fonte
que é elementuma seleção jQuery? E quanto à altura?
Istiaque Ahmed
2

Só mudando um pouco a segunda opção do Gabriel, para ficar mais fácil de usar:

function getImgSize(imgSrc, callback) {
    var newImg = new Image();

    newImg.onload = function () {
        if (callback != undefined)
            callback({width: newImg.width, height: newImg.height})
    }

    newImg.src = imgSrc;
}

Html:

<img id="_temp_circlePic" src="http://localhost/myimage.png" 
style="width: 100%; height:100%">

Chamada de amostra:

getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) {
    // do what you want with the image's size.
    var ratio = imgSize.height / $("#_temp_circlePic").height();
});
Wagner Bertolini Junior
fonte