Bagaimana cara mendapatkan ukuran gambar (tinggi & lebar) menggunakan JavaScript?


Jawaban:


792

Anda bisa mendapatkan gambar dan memeriksa dimensi menggunakan Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Ini bisa bermanfaat jika gambar itu bukan bagian dari markup.


4
@ blo0p3r - gambar tidak perlu dimuat ke DOM sebelum ini. Ini memuat gambar, dan menyalakan onload untuk memberi kita dimensi. Omong-omong - Jawaban terbaik di sini !!
Vik

Saya berharap Anda bisa melakukan ini dengan Obyek XMLHttpRequest juga.
PHearst

Bagaimana saya bisa menggunakan kode ini untuk beberapa (array) gambar? Mungkin perlu menggabungkannya dengan jawaban terbaik dari sini: stackoverflow.com/questions/4288759/… ?
Kozuch

Solusi untuk banyak gambar di sini: stackoverflow.com/questions/19269834/…
Kozuch

2
img.onerror = function () {alert (0); // not found handler}
Limitless isa

437

clientWidth dan clientHeight adalah properti DOM yang menunjukkan ukuran di-browser saat ini dari dimensi bagian dalam elemen DOM (tidak termasuk margin dan perbatasan). Jadi dalam kasus elemen IMG, ini akan mendapatkan dimensi sebenarnya dari gambar yang terlihat.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

33
@Nicky tepat sekali. Ini memberikan dimensi gambar seperti yang diberikan dalam contoh itu .
Rex M

8
@ Mat-visual $.fn.widthdan $.fn.height.
yckart

202
Jawaban yang benar adalah menggunakan img.naturalWidth dan img.naturalHeight
Octopus

5
document.getElementByIdlebih panjang untuk mengetik tetapi 10 kali lebih cepat dari $('#...')[0].
bfontaine

17
@RexM Di Chrome 35, 16 kali lebih cepat: jsperf.com/document-getelementbyid-vs-jquery/5
bfontaine

335

Juga (selain jawaban Rex dan Ian) ada:

imageElement.naturalHeight

dan

imageElement.naturalWidth

Ini memberikan tinggi dan lebar file gambar itu sendiri (bukan hanya elemen gambar).


15
Ini sekarang didukung di IE9 dan semua browser web modern.
Aaron

dapatkan 0x0 saat gambar belum selesai dimuat.
brk

1
Saya menggunakan chrome dan ini hanya berfungsi jika ukuran gambar di dom tidak berubah setelah halaman dimuat.
Jonathan Czitkovics

Ya ... ini yang saya lakukan. Dan kemudian, setelah itu, jika "naturalwidth" atau tinggi kembali sebagai NaNs, saya kembali ke metode lain dari jawaban sebelumnya (dapatkan gambar lagi sebagai Gambar baru (), dan kemudian dapatkan lebar dan tinggi selama peristiwa onload. Lebih lambat, tetapi cara ini akan bekerja di browser yang lebih lama seperti IE8
Randy

jika anda ingin tahu tentang dukungan browser caniuse.com/#feat=img-naturalwidth-naturalheight
Ulmer-Morozov

109

Jika Anda menggunakan jQuery dan Anda meminta ukuran gambar Anda harus menunggu sampai mereka memuat atau Anda hanya akan mendapatkan angka nol.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Apakah lebar dan tinggi selalu tersedia di penangan beban?
Anders Lindén

@ AndersLindén - lihat tinta yang ditambahkan Akseli untuk acara pemuatan. Ada bagian khusus yang dikhususkan untuk gambar. Jawaban teknisnya adalah "tidak," tetapi dalam praktiknya saya tidak pernah memiliki masalah dengan situs kami yang menggunakan metode ini.
mrtsherman

Tetapi jika jawaban teknisnya tidak, itu tidak bisa digunakan? Bukan?
Anders Lindén

Apakah mungkin untuk mendapatkan atribut gambar sebelum dimuat?
no nein

98

Saya pikir pembaruan untuk jawaban-jawaban ini berguna karena salah satu jawaban terbaik menyarankan untuk menggunakan clientWidthdan clientHeight, yang saya pikir sekarang sudah usang.

Saya telah melakukan beberapa percobaan dengan HTML5, untuk melihat nilai mana yang benar-benar dikembalikan.

Pertama-tama, saya menggunakan program bernama Dash untuk mendapatkan gambaran umum tentang API gambar. Ini menyatakan bahwa heightdan widthadalah tinggi / lebar gambar yang diberikan dan itu naturalHeightdan naturalWidthadalah tinggi intrinsik / lebar gambar (dan hanya HTML5).

Saya menggunakan gambar kupu-kupu yang indah, dari file dengan tinggi 300 dan lebar 400. Dan Javascript ini:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Lalu saya menggunakan HTML ini, dengan CSS sebaris untuk tinggi dan lebar.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Hasil:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Saya kemudian mengubah HTML sebagai berikut:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

yaitu menggunakan atribut tinggi dan lebar daripada gaya inline

Hasil:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Saya kemudian mengubah HTML sebagai berikut:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

yaitu menggunakan atribut dan CSS, untuk melihat mana yang diutamakan.

Hasil:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

1
Mengapa Anda berpikir bahwa clientHeight sudah usang?
Cactux

64

Menggunakan JQuery Anda melakukan ini:

var imgWidth = $("#imgIDWhatever").width();

63
Dan jika gambar belum dimuat?
James Westgate

11
dan jika gambar di properti latar belakang div? :)
NDM

3
@ JamesWestgate Jika gambar belum dimuat, tidak ada cara untuk menentukan ukuran sebenarnya. Namun Anda dapat mencoba membaca atribut widthdan elemen. heightimg
Tim

@ Tim Anda dapat memuatnya di latar belakang dan saat dimuat, Anda dapat memiliki dimensinya
Odys

26

Hal yang semua orang lupa adalah bahwa Anda tidak dapat memeriksa ukuran gambar sebelum memuat. Ketika penulis memeriksa semua metode yang diposting itu akan bekerja mungkin hanya di localhost. Karena jQuery dapat digunakan di sini, ingat bahwa acara 'siap' diaktifkan sebelum gambar dimuat. $ ('# xxx'). width () dan .height () harus diaktifkan dalam acara onload atau lebih baru.


9
Posting beberapa kode yang diperbarui, Anda mungkin akan di-upgrade dan bahkan mendapatkan lencana pembalikan yang diidamkan!
James Westgate

1
@Pikir, tolong berikan solusi Anda karena analisis Anda tampaknya benar.
a20

5
Ini bukan jawaban. Hanya komentar tentang jawaban yang lain.
jeffdill2

20

Anda hanya dapat benar-benar melakukan ini menggunakan callback dari peristiwa pemuatan karena ukuran gambar tidak diketahui sampai benar-benar selesai memuat. Sesuatu seperti kode di bawah ini ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

1
di jquery, Anda dapat menggunakan $ .proxy untuk ini.
Jochem Van Der Spek

9

Dengan jQuery perpustakaan-

Gunakan .width()dan .height().

Lebih lebar jQuery dan jQuery heigth .

Contoh kode-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>


8

ok teman-teman, saya pikir saya meningkatkan kode sumber untuk dapat membiarkan gambar memuat sebelum mencoba mencari tahu sifat-sifatnya, kalau tidak akan menampilkan '0 * 0', karena pernyataan berikutnya akan dipanggil sebelum file tersebut dimuat ke dalam browser. Membutuhkan jquery ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

8

Dengan asumsi, kami ingin mendapatkan dimensi gambar <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Dimensi Alami

el.naturalWidthdan el.naturalHeightakan memberi kita dimensi alami , dimensi file gambar.

Dimensi Tata Letak

el.offsetWidthdan el.offsetHeightakan memberi kita dimensi di mana elemen diberikan pada dokumen.


4
Cukup pilih jawaban yang ada yang menyediakan konten bermanfaat; jangan menyalin dari beberapa dari mereka ke yang baru; Anda hanya menggandakan konten saja.
TylerH

7

Sebelum menggunakan ukuran gambar asli, Anda harus memuat gambar sumber. Jika Anda menggunakan kerangka JQuery Anda bisa mendapatkan ukuran gambar nyata dengan cara sederhana.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

7

Ini jawabannya adalah persis apa yang saya cari (di jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

5

Anda dapat memiliki fungsi sederhana seperti yang berikut ( imageDimensions()) jika Anda tidak takut menggunakan janji .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>


3

Jawaban JQuery:

$height = $('#image_id').height();
$width  = $('#image_id').width();

3

Pemikiran ini mungkin bermanfaat bagi beberapa yang menggunakan Javascript dan / atau naskah pada 2019.

Saya menemukan yang berikut, seperti yang disarankan beberapa orang, salah:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

Ini benar:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Kesimpulan:

Gunakan img, tidak this, dalam onloadfungsi.


img.src di atas memiliki kesalahan ketik, harus "tidak: Saya mencoba mengedit ini tetapi tidak bisa karena:" Suntingan harus minimal 6 karakter; apakah ada hal lain yang perlu diperbaiki di pos ini? "Jika tidak, solusi yang sangat sederhana yang bekerja dengan sempurna!
user2677034

Terima kasih @ user2677034 untuk memperhatikan. Saya tidak melihat itu. Saya akan menyalahkan keyboard Apple. Hanya bercanda ... Itu mungkin salahku. ; P
Brian

2

Baru-baru ini saya memiliki masalah yang sama untuk kesalahan pada slider slider. Ketinggian gambar pertama diatur lebih kecil karena penundaan pemuatan. Saya mencoba metode berikut untuk menyelesaikan masalah itu dan berhasil.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

Ini akan memberi Anda ketinggian sehubungan dengan lebar yang Anda atur daripada lebar asli atau Nol.


1

Anda juga bisa menggunakan:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

1

Nicky De Maeyer bertanya setelah foto latar belakang; Saya cukup mendapatkannya dari css dan ganti "url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

Saya tidak pernah mengerti penggunaan regexp untuk ini saat menggunakan jQuery. Karena jQuery akan menormalkan atribut agar Anda dapat lolos dengan menggunakan s.substr(4,s.length-5), itu setidaknya lebih mudah di mata;)
Jonas Schubert Erlandsson

1

Anda dapat menerapkan properti handler onload ketika halaman dimuat dalam js atau jquery seperti ini: -

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

1

Cukup, Anda bisa menguji seperti ini.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

0
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

0

penting untuk menghapus pengaturan yang ditafsirkan browser dari div induk. Jadi, jika Anda menginginkan lebar dan tinggi gambar yang sebenarnya, Anda bisa menggunakannya

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Ini adalah salah satu contoh Proyek TYPO3 dari saya di mana saya membutuhkan properti nyata dari gambar untuk menskala dengan hubungan yang benar.


0
var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

Ini metode saya, semoga ini membantu. :)


0
function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

ini berfungsi untuk beberapa pratinjau gambar dan mengunggah. jika Anda harus memilih untuk masing-masing gambar satu per satu. Kemudian salin dan lewati ke semua fungsi gambar pratinjau dan validasi !!!


0

Sebelum memperoleh atribut elemen, halaman dokumen harus memuat:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

0

hanya lulus objek file img yang diperoleh oleh elemen input ketika kita memilih file yang benar itu akan memberikan tinggi netural dan lebar gambar

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}
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.