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

Apakah ada JavaScript atau API jQuery atau metode untuk mendapatkan dimensi gambar pada halaman?

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.

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;

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

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

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

Menggunakan JQuery Anda melakukan ini:

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

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.

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

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>

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

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.

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

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

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

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>

Jawaban JQuery:

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

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.

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.

Anda juga bisa menggunakan:

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

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

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;

 });

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>

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

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.

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. :)

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

Sebelum memperoleh atribut elemen, halaman dokumen harus memuat:

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

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