JavaScript: Dapatkan dimensi gambar


97

Saya hanya memiliki URL ke gambar. Saya perlu menentukan tinggi dan lebar gambar ini hanya dengan menggunakan JavaScript. Gambar tidak dapat dilihat oleh pengguna di halaman. Bagaimana saya bisa mendapatkan dimensinya?



1
sebenarnya jawaban ini adalah satu-satunya jawaban yang benar, karena Anda harus menunggu hingga gambar dimuat.
Shadow Wizard adalah Ear For You

Jawaban:


198
var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

1
Kecuali Anda perlu mendapatkan dimensi secara sinkron. Dalam hal ini Anda hanya perlu memasukkan gambar ke dokumen (menggunakan posisi absolut di suatu tempat di luar viewport) - kemudian dimensinya tersedia tepat setelah memanggil document.appendChild ().
JustAndrei

1
Mengapa onloadsebelum daripada mengatur url gambar?
Ajay Gaur

23
@AjayGaur karena onloadadalah pendengar yang akan dipanggil secara asinkron jika gambar dimuat dengan benar. Jika Anda menyetel listener setelah menyetel url, gambar dapat dimuat tepat sebelum kode mencapai setelan onload itu sendiri, sehingga listener tidak pernah dipanggil. Menggunakan analogi, jika Anda menyajikan gelas dengan air untuk diri Anda sendiri, apakah Anda menuangkan air terlebih dahulu dan selanjutnya Anda meletakkan gelas untuk mengisinya? Atau apakah Anda pertama kali memasukkan gelas dan kemudian menuangkan air ke dalamnya?
biomorgoth

3
img.naturalWidth dan img.naturalHeight adalah jawaban yang benar
Kamlesh

1
Terima kasih @Kamlesh, saya membutuhkan dimensi alam.
jahooma

43

Buat yang baru Image

var img = new Image();

Mengatur src

img.src = your_src

Dapatkan widthdanheight

//img.width
//img.height

17
Saya terus mendapatkan 0 untuk lebar dan tinggi, menggunakan kode yang tepat ini.
Adam Casey

11
Sepertinya gambar harus dimuat, yang masuk akal.
Adam Casey

3
info tambahan - meskipun ini berhasil untuk saya pertama kali, itu terputus-putus. Saya pikir masalahnya adalah karena gambar tersebut belum diunduh. Saya memperbaikinya dengan menjalankan kode yang menggunakan dimensi dalam event handler onload seperti: img.onload = function () {};
Shumii

3
Kode ini berfungsi, selama gambar ada di cache browser. Setelah cache tidak valid atau dihapus. Ini tidak akan berhasil. Jadi tidak terlalu bisa diandalkan.
bharatesh

2
Itu tidak berfungsi, karena gambar belum dimuat - pemuatan gambar dilakukan secara asinkron, jadi Anda harus menunggu acara memuat.
pengguna1702401

5

Ini menggunakan fungsi dan menunggu sampai selesai.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

1
Mengapa fungsi yang dapat digunakan kembali ini dengan deferran diturunkan suara ?!
DavidDunham

'hanya menggunakan JavaScript' dan ini adalah jQuery, saya kira
Apolo

Anda mendapatkan upvote dari saya meskipun menggunakan jQuerry. Pendekatannya yang penting.
krankuba

2

naturalWidth dan naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

1

Dapatkan ukuran gambar dengan jQuery

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

Dapatkan ukuran gambar dengan JavaScript

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

Dapatkan ukuran gambar dengan JavaScript (browser modern, IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Gunakan di atas hanya sebagai: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement



0

jika Anda memiliki file gambar dari formulir input Anda. Anda bisa menggunakan seperti ini

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

-3

Kode berikut menambahkan tinggi dan lebar atribut gambar ke setiap gambar di halaman.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>

13
Pertanyaannya adalah tentang mendapatkan dimensi gambar tanpa menunjukkan gambar kepada pengguna. Mengatur atribut lebar dan tinggi gambar setelah gambar ditampilkan sama sekali tidak masuk akal.
Yaroslav Stavnichiy
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.