Tentukan ukuran asli gambar lintas browser?

90

Apakah ada cara kerangka kerja yang andal untuk menentukan dimensi fisik dari ukuran yang <img src='xyz.jpg'>diubah di sisi klien?

javascript image

— Pekka
sumber

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

— neaumusic

130

Anda memiliki 2 pilihan:

Pilihan 1:

Lepaskan widthdan heightatribut dan membaca offsetWidthdanoffsetHeight

Pilihan 2:

Buat Imageobjek JavaScript , setel src, dan baca widthdan height(Anda bahkan tidak perlu menambahkannya ke halaman untuk melakukan ini).

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 oleh Pekka : Seperti yang telah disepakati dalam komentar, saya mengubah fungsi untuk berjalan pada acara ´onload´ pada gambar. Sebaliknya, dengan gambar besar, heightdan widthtidak akan mengembalikan apa pun karena gambar tersebut belum dimuat.

— Gabriel McAdams
sumber

Itu tidak akan berfungsi dengan gambar yang belum dimuat. Mungkin ada baiknya menyesuaikannya agar berfungsi dengan baik karena orang lain yang tersandung pada jawaban ini.

— Yakobus

11

@Gabriel, saya menggunakan ini tetapi dengan newImg.onloadfungsi untuk memastikan gambar dimuat ketika saya mengatur lebar / tinggi. Apakah Anda setuju dengan saya mengedit jawaban Anda?

— Pekka

2

Sekadar catatan: Chrome / OSX dapat mengalami masalah dengan gambar yang disimpan dalam cache di mana Anda mendapatkan 0 sebagai tinggi / lebar menggunakan teknik ini.

— David Hellsing

2

bagaimana cara mendapatkan kembali tinggi dan lebar ... ?? karena variabel tersebut tidak keluar dari onload

— jack

5

@GabrielMcAdams, jika Anda menambahkan if(newImg.complete || newImg.readyState === 4) newImg.onload();di akhir fungsi Anda, itu akan memperbaiki masalah di Chrome / OSX yang menyebabkan onload tidak aktif saat gambar dimuat dari cache.

— Prestaul

102

Gambar (setidaknya di Firefox) memiliki naturalWidthproperti a / height sehingga Anda dapat menggunakannya img.naturalWidthuntuk mendapatkan lebar aslinya

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

Sumber

— Bugster
sumber

8

Bekerja di Chrome juga

— bcoughlan

4

Topik ini masih relevan di tahun 2013. Berikut ini tautan dengan solusi yang bagus untuk IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

— BurninLeo

4

Ini adalah jawaban kemenangan di tahun 2018. Bekerja di mana saja. (Sesuai tabel kompatibilitas browser di MDN.)

— 7vujy0f0hy

3

Anda dapat melakukan pramuat gambar ke dalam objek Gambar javascript, lalu periksa properti lebar dan tinggi pada objek tersebut.

— Myles
sumber

Tentu saja - saya tidak harus memasukkannya ke dalam dokumen. Akan melakukannya seperti itu, cheers!

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

— Roma
sumber

itu elementpilihan jQuery? Bagaimana dengan tinggi badan?

— Istiaque Ahmed

2

Hanya mengubah sedikit opsi kedua Gabriel, agar lebih mudah digunakan:

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

Contoh panggilan:

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
sumber