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?

javascript html image

— JQueeeer
sumber

2

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

1

sebenarnya jawaban ini adalah satu-satunya jawaban yang benar, karena Anda harus menunggu hingga gambar dimuat.

— Shadow Wizard adalah Ear For You

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;

— Shumii
sumber

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

— nc3b
sumber

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

— DavidDunham
sumber

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%; }

— Bitterblue
sumber

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

— Mahajan cerah
sumber

0

Pertanyaan serupa ditanyakan dan dijawab menggunakan JQuery di sini:

Dapatkan tinggi lebar gambar jarak jauh dari url

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

getMeta("http://page.com/img.jpg");

— Luke Knepper
sumber

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

— Raka Adi Nugroho
sumber

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

— Testere
sumber

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