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

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