Określić oryginalny rozmiar obrazu w przeglądarce?

90

Czy istnieje wiarygodny, niezależny od platformy sposób określania fizycznych wymiarów elementu o <img src='xyz.jpg'>zmienionym rozmiarze po stronie klienta?

javascript image

— Pekka
źródło

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

— neaumusic

130

Masz 2 opcje:

Opcja 1:

Wyjąć widthi heightatrybuty i czytać offsetWidthioffsetHeight

Opcja 2:

Utwórz Imageobiekt JavaScript , ustaw srci przeczytaj widthi height(nie musisz nawet dodawać go do strony, aby to zrobić).

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
}

Edycja autorstwa Pekka : Jak uzgodniono w komentarzach, zmieniłem funkcję tak, aby działała po zdarzeniu „załadowania” obrazu. W przeciwnym razie przy dużych obrazach heighti widthnic nie zwróci, ponieważ obraz nie został jeszcze załadowany.

— Gabriel McAdams
źródło

To nie zadziała w przypadku obrazów, które nie są jeszcze załadowane. Warto go dostosować, aby działał prawidłowo dla innych osób, które natkną się na tę odpowiedź.

— James

11

@Gabriel, używam tego, ale z newImg.onloadfunkcją upewniającą się, że obraz jest ładowany, gdy ustawiam szerokość / wysokość. Czy zgadzasz się, że odpowiednio edytuję twoją odpowiedź?

— Pekka

2

Na marginesie: Chrome / OSX może mieć problemy z obrazami w pamięci podręcznej, w których za pomocą tej techniki otrzymujesz 0 jako wysokość / szerokość.

— David Hellsing,

2

Jak mogę uzyskać zwrot i szerokość ... ?? ponieważ te zmienne nie wychodzą poza onload

— jack

5

@GabrielMcAdams, jeśli dodasz if(newImg.complete || newImg.readyState === 4) newImg.onload();na końcu swojej funkcji, naprawi to problem w Chrome / OSX, który powoduje, że ładowanie nie uruchamia się, gdy obrazy są ładowane z pamięci podręcznej.

— Prestaul

101

Obrazy (przynajmniej w przeglądarce Firefox) mają naturalWidthwłaściwość / height, dzięki czemu można jej użyć img.naturalWidthdo uzyskania oryginalnej szerokości

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

Źródło

— Bugster
źródło

8

Działa również w Chrome

— bcoughlan,

4

Ten temat jest nadal aktualny w 2013 roku. Oto łącze ze świetnym obejściem IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

— BurninLeo

4

To zwycięska odpowiedź w 2018 roku. Działa wszędzie. (Według tabeli zgodności przeglądarek w MDN.)

— 7vujy0f0hy

3

Możesz wstępnie załadować obraz do obiektu Image w javascript, a następnie sprawdzić właściwości szerokości i wysokości tego obiektu.

— Myles
źródło

Oczywiście - nie muszę tego umieszczać w dokumencie. Zrobię to w ten sposób, na zdrowie!

— 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);

— rzymski
źródło

to elementjest wybór jQuery? A co z wysokością?

— Istiaque Ahmed,

2

Zmieniam tylko trochę drugą opcję Gabriela, aby była łatwiejsza w użyciu:

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

Przykładowe połączenie:

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
źródło