Determinare la dimensione originale dell'immagine cross browser?

90

Esiste un modo affidabile e indipendente dal framework per determinare le dimensioni fisiche di un <img src='xyz.jpg'>ridimensionato sul lato client?

javascript image

— Pekka
fonte

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

— neaumusic

130

Hai 2 opzioni:

Opzione 1:

Rimuovere gli widthe heightattributi e leggere offsetWidtheoffsetHeight

Opzione 2:

Crea un Imageoggetto JavaScript , imposta srce leggi widthe height(non devi nemmeno aggiungerlo alla pagina per farlo).

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
}

Modifica di Pekka : come concordato nei commenti, ho modificato la funzione per eseguire l'evento "caricamento" dell'immagine. In caso contrario, con immagini grandi heighte widthnon restituirebbe nulla perché l'immagine non è stata ancora caricata.

— Gabriel McAdams
fonte

Non funzionerà con le immagini che non sono ancora state caricate. Potrebbe valere la pena adattarlo per funzionare correttamente per altre persone che si imbattono in questa risposta.

— James,

11

@ Gabriel, lo sto usando ma con una newImg.onloadfunzione per assicurarmi che l'immagine venga caricata quando ho impostato la larghezza / altezza. Sei d'accordo che modifichi la tua risposta di conseguenza?

— Pekka

2

Solo una nota a margine: Chrome / OSX può avere problemi con le immagini memorizzate nella cache in cui ottieni 0 come altezza / larghezza usando questa tecnica.

— David Hellsing

2

come posso ottenere altezza e larghezza di ritorno ... ?? perché quelle variabili non stanno uscendo dall'onload

— jack

5

@GabrielMcAdams, se aggiungi if(newImg.complete || newImg.readyState === 4) newImg.onload();alla fine della tua funzione risolverà il problema su Chrome / OSX che impedisce a onload di attivarsi quando le immagini vengono caricate dalla cache.

— Prestaul

101

Le immagini (almeno su Firefox) hanno una naturalWidthproprietà / height in modo da poterle utilizzare img.naturalWidthper ottenere la larghezza originale

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

fonte

— Bugster
fonte

8

Funziona anche su Chrome

— bcoughlan

4

Questo argomento è ancora pertinente nel 2013. Ecco un collegamento con un'ottima soluzione alternativa per IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

— BurninLeo

4

Questa è la risposta vincente nel 2018. Funziona ovunque. (Secondo la tabella di compatibilità del browser su MDN.)

— 7vujy0f0hy

3

Puoi precaricare l'immagine in un oggetto Immagine javascript, quindi controllare le proprietà di larghezza e altezza su quell'oggetto.

— Myles
fonte

Ovviamente, non devo inserirlo nel documento. Lo farò in questo modo, grazie!

— 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

è elementuna selezione jQuery? Cos'è l'altezza?

— Istiaque Ahmed

2

Sto solo cambiando un po 'la seconda opzione di Gabriel, per essere più facile da usare:

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%">

Chiamata di esempio:

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