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

Jawaban:

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