JavaScript: Dapatkan dimensi gambar

Question 1

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?

Question 2

var img = new Image();

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

  // code here to use the dimensions
}

img.src = url;

Question 3

Buat yang baru Image

var img = new Image();

Mengatur src

img.src = your_src

Dapatkan widthdanheight

//img.width
//img.height

Question 4

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

Question 5

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

Question 6

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

Question 7

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

Question 8

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

Question 9

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>

Answer 1

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

Answer 2

2

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

stecb

Answer 3

1

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

Shadow Wizard adalah Ear For You

Answer 4

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

Answer 5

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

Answer 6

1

Mengapa onloadsebelum daripada mengatur url gambar?

Ajay Gaur

Answer 7

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

Answer 8

3

img.naturalWidth dan img.naturalHeight adalah jawaban yang benar

Kamlesh

Answer 9

1

Terima kasih @Kamlesh, saya membutuhkan dimensi alam.

jahooma

Answer 10

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

Answer 11

17

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

Adam Casey

Answer 12

11

Sepertinya gambar harus dimuat, yang masuk akal.

Adam Casey

Answer 13

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

Answer 14

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

Answer 15

2

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

pengguna1702401

Answer 16

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

Answer 17

1

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

DavidDunham

Answer 18

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

Apolo

Answer 19

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

krankuba

Answer 20

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

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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>

Answer 25

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

JavaScript: Dapatkan dimensi gambar

Jawaban: