Originalgröße des bildübergreifenden Browsers ermitteln?

90

Gibt es eine zuverlässige, rahmenunabhängige Methode zum Bestimmen der physischen Abmessungen einer <img src='xyz.jpg'>Größe auf der Client-Seite?

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

Antworten:

130

Sie haben 2 Möglichkeiten:

Option 1:

Entfernen Sie die widthund heightAttribute und lesen offsetWidthundoffsetHeight

Option 2:

Erstellen Sie ein JavaScript- ImageObjekt, legen Sie das fest srcund lesen Sie das widthund height(Sie müssen es nicht einmal zur Seite hinzufügen, um dies zu tun).

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 : Wie in den Kommentaren vereinbart, habe ich die Funktion so geändert, dass sie beim "Laden" des Ereignisses des Bildes ausgeführt wird. Andernfalls mit großen Bildern heightund widthwürde nichts zurückgeben, da das Bild noch nicht geladen wurde.

Gabriel McAdams
quelle
Das funktioniert nicht mit Bildern, die noch nicht geladen sind. Es könnte sich lohnen, es so anzupassen, dass es für andere Personen, die über diese Antwort stolpern, ordnungsgemäß funktioniert.
James
11
@ Gabriel, ich benutze dies aber mit einer newImg.onloadFunktion, um sicherzustellen, dass das Bild geladen wird, wenn ich die Breite / Höhe einstelle. Kannst du deine Antwort entsprechend bearbeiten?
Pekka
2
Nur eine Randnotiz: Chrome / OSX kann Probleme mit zwischengespeicherten Bildern haben, bei denen Sie mit dieser Technik 0 als Höhe / Breite erhalten.
David Hellsing
2
Wie komme ich zurück Höhe und Breite ...? weil diese Variablen nicht außerhalb der Onload werden
Jack
5
@GabrielMcAdams, wenn Sie if(newImg.complete || newImg.readyState === 4) newImg.onload();am Ende Ihrer Funktion hinzufügen , wird das Problem unter Chrome / OSX behoben, das dazu führt, dass der Onload nicht ausgelöst wird, wenn Bilder aus dem Cache geladen werden.
Prestaul
101

Bilder (mindestens in Firefox) haben die naturalWidthEigenschaft / height, sodass Sie img.naturalWidthdie ursprüngliche Breite ermitteln können

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

Quelle

Bugster
quelle
8
Funktioniert auch auf Chrome
Bcoughlan
4
Dieses Thema ist auch 2013 noch relevant. Hier ist ein Link mit einer großartigen Problemumgehung für IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie
BurninLeo
4
Dies ist die beste Antwort im Jahr 2018. Funktioniert überall. (Pro Browser-Kompatibilitätstabelle bei MDN.)
7vujy0f0hy
3

Sie können das Bild in ein Javascript-Bildobjekt vorladen und dann die Eigenschaften für Breite und Höhe dieses Objekts überprüfen.

Myles
quelle
Natürlich - ich muss es nicht in das Dokument einfügen. Werde es so machen, Prost!
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);
römisch
quelle
ist elementeine jQuery-Auswahl? Was ist mit der Höhe?
Istiaque Ahmed
2

Nur ein bisschen Gabriels zweite Option ändern, um einfacher zu bedienen zu sein:

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

Beispielanruf:

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
quelle