¿Determinar el tamaño original de la imagen en varios navegadores?

90

¿Existe una forma confiable e independiente del marco de determinar las dimensiones físicas de un <img src='xyz.jpg'>redimensionado en el lado del cliente?

javascript image

— Pekka
fuente

img.onload = function () {console.log(img.height, img.width)}

— Neaumusic

130

Tienes 2 opciones:

Opción 1:

Retire las widthy los heightatributos y leer offsetWidthyoffsetHeight

Opcion 2:

Cree un Imageobjeto JavaScript , configure el srcy lea el widthy height(ni siquiera tiene que agregarlo a la página para hacer esto).

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
}

Editar por Pekka : Como se acordó en los comentarios, cambié la función para que se ejecute en el evento ´onload´ de la imagen. De lo contrario, con imágenes grandes, heighty widthno devolvería nada porque la imagen aún no se cargó.

— Gabriel McAdams
fuente

Eso no funcionará con imágenes que aún no están cargadas. Podría valer la pena ajustarlo para que funcione correctamente para otras personas que se encuentran con esta respuesta.

— James

11

@Gabriel, estoy usando esto pero con una newImg.onloadfunción para asegurarme de que la imagen se cargue cuando configuro el ancho / alto. ¿Estás de acuerdo con que edite tu respuesta en consecuencia?

— Pekka

2

Solo una nota al margen: Chrome / OSX puede tener problemas con las imágenes en caché donde obtiene 0 como alto / ancho usando esta técnica.

— David Hellsing

2

¿Cómo puedo obtener la altura y el ancho de retorno ... ?? porque esas variables no se salen de la carga

— jack

5

@GabrielMcAdams, si agrega if(newImg.complete || newImg.readyState === 4) newImg.onload();al final de su función, solucionará el problema en Chrome / OSX que hace que la carga no se active cuando las imágenes se cargan desde el caché.

— Prestaul

101

Las imágenes (en Firefox al menos) tienen una naturalWidthpropiedad / height para que pueda usar img.naturalWidthpara obtener el ancho original

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

Fuente

— Bugster
fuente

8

También funciona en Chrome

— bcoughlan

4

Este tema sigue siendo relevante en 2013. Aquí hay un enlace con una excelente solución para IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

— BurninLeo

4

Esta es la respuesta ganadora en 2018. Funciona en todas partes. (Según la tabla de compatibilidad del navegador en MDN.)

— 7vujy0f0hy

3

Puede precargar la imagen en un objeto Image de javascript, luego verificar las propiedades de ancho y alto en ese objeto.

— Myles
fuente

Por supuesto, no tengo que incluirlo en el documento. ¡Lo haré de esa manera, salud!

— 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
fuente

elementQué es una selección de jQuery? ¿Qué pasa con la altura?

— Istiaque Ahmed

2

Simplemente cambiando un poco la segunda opción de Gabriel, para que sea más 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%">

Llamada de muestra:

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
fuente