Dapatkan lebar dan tinggi nyata gambar dengan JavaScript? (di Safari / Chrome)


278

Saya membuat plugin jQuery.

Bagaimana cara mendapatkan lebar dan tinggi gambar asli dengan Javascript di Safari?

Berikut ini berfungsi dengan Firefox 3, IE7 dan Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

Tetapi di browser Webkit seperti Safari dan Google Chrome nilainya 0.


4
Jawaban yang diterima menggunakan acara memuat gambar. Masuk akal, tetapi ternyata menjadi solusi yang tidak dapat diandalkan dalam situasi di mana gambar dapat di-cache (banyak yang membuat saya kecewa).
Nosredna

Pandangan saya tentang ini dapat membantu Anda, diuji dalam Webkit terbaru. stackoverflow.com/questions/318630/...
xmarcos

5
@Nosredna, Anda mungkin tertarik pada fungsi imagesLoaded yang akan diaktifkan bahkan ketika gambar telah di-cache.
bejonbee

7
Jawaban yang benar untuk pertanyaan ini adalah dengan hanya menggunakan properti naturalWidth dan naturalHeight. Tidak diperlukan peretasan.
David Johnstone

Anda juga bisa melakukan persis apa yang Anda lakukan pada memuat jendela alih-alih dokumen siap
user1380540

Jawaban:


356

Browser Webkit mengatur properti tinggi dan lebar setelah gambar dimuat. Alih-alih menggunakan timeout, saya sarankan menggunakan event yang memuat gambar. Ini contoh singkatnya:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Untuk menghindari efek CSS pada dimensi gambar, kode di atas membuat salinan memori dalam gambar. Ini adalah solusi yang sangat cerdas yang disarankan oleh FDisk .

Anda juga dapat menggunakan atribut naturalHeightdan naturalWidthHTML5.


5
Itu pintar, tidak tahu Anda bisa melakukan $ (img) .load ();
SeanJA

3
Selain widthdan heightAnda mungkin harus juga menghapus min-width, min-height, max-widthdan max-heightkarena mereka juga dapat mempengaruhi dimensi gambar.
mqchen

5
Solusi FDisk sangat cerdas. Sayangnya solusinya seperti yang ditulisnya itu hanya akan berfungsi jika gambar di-cache atau jika halaman tersebut sudah selesai diunduh. Jika gambar tidak di-cache atau jika kode ini dipanggil sebelumnya window.onload, tinggi / lebar 0 dapat dikembalikan. Bagaimanapun, saya sudah mengintegrasikan ide FDisk ke dalam solusi di atas.
Xavi

5
ketika saya mencoba console.log (pic_real_height) saya tidak terdefinisi setiap waktu. chrome, FF, IE9.
helgatheviking

10
Masalah yang mungkin Anda miliki di sini adalah bahwa load()akan dieksekusi secara tidak sinkron jadi jika Anda ingin mengakses widthdan height- mereka mungkin belum ditetapkan. Alih-alih lakukan "keajaiban" dalam load()dirinya sendiri!
daGrevis

286

Gunakan atribut naturalHeightdan naturalWidthdari HTML5 .

Sebagai contoh:

var h = document.querySelector('img').naturalHeight;

Bekerja di IE9 +, Chrome, Firefox, Safari dan Opera ( statistik ).


3
@ DavidJohnstone Contoh dari mereka yang digunakan mungkin membantu. Tapi saya setuju, pasti layak menjadi yang lebih tinggi.
Stephen

5
Ini sepertinya tidak berfungsi di versi terbaru FireFox (30.0) kecuali gambar sudah ada di cache.
Joel Kinzel

1
Saya setuju dengan David Johnstone. Ini berita bagus.
jchwebdev

Perhatikan bahwa Anda masih perlu menunggu gambar dimuat
Jesús Carrera

Tidak, clientHeight / clientWidth secara eksplisit tidak melakukan apa yang ditanyakan. Perlu mengembalikan tinggi dan lebar gambar, bukan tinggi dan lebar gambar seperti yang terlihat pada halaman. naturalWidth dan naturalHeight benar.
Jeroen van den Broek

61


function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

Anda tidak perlu menghapus gaya dari atribut dimensi gambar atau gambar. Cukup buat elemen dengan javascript dan dapatkan lebar objek yang dibuat.


3
Sejak beberapa bulan, mengkloning gambar dengan jquery (menggunakan Chrome terbaru) dan mendapatkan properti itu, selalu mengembalikan 0x0 Sejauh ini ini satu-satunya solusi yang berfungsi (telah menguji semua yang lain di halaman ini) Sebelum kembali, saya mengatur t = null juga.
Omiod

1
FDisk tidak menyarankan untuk mengkloning gambar dengan jQuery. Dia menyarankan untuk membuat Imageobjek baru , lalu melihat widthpropertinya. Ini adalah pendekatan yang sederhana dan elegan. FDisk, Anda pilih saya. :)
davidchambers

3
Ini adalah cara yang sangat cerdas untuk menghindari masalah css. Sayangnya solusi seperti yang tertulis di atas hanya akan berfungsi jika gambar di-cache atau sudah selesai diunduh. Jika gambar tidak di-cache atau jika kode ini dipanggil sebelumnya window.onload, lebar 0 dapat dikembalikan.
Xavi

1
Saya menggunakan pendekatan ini di situs web untuk telepon seluler di galeri gambar. Gambar yang lebih besar maka resolusi ditampilkan dengan 100% dalam css dan lebih kecil dalam dimensi aslinya.
FDisk

1
Seperti yang disebutkan Xavi, ini gagal di IE8 dan terkadang tergantung pada caching gambar. Jadi saya gabungkan dengan pendekatan ini, dan itu bekerja dengan sempurna: ikat acara pemuatan terlebih dahulu, kemudian tetapkan objek gambar sumbernya stackoverflow.com/questions/4921712/…
Kevin C.

16

Masalah mendasarnya adalah browser WebKit (Safari dan Chrome) memuat informasi JavaScript dan CSS secara paralel. Dengan demikian, JavaScript dapat dijalankan sebelum efek gaya CSS telah dihitung, menghasilkan jawaban yang salah. Di jQuery, saya telah menemukan bahwa solusinya adalah menunggu hingga document.readyState == 'complete', .eg,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

Sejauh lebar dan tinggi berjalan ... tergantung pada apa yang Anda lakukan, Anda mungkin ingin offsetWidth dan offsetHeight, yang mencakup hal-hal seperti batas dan bantalan.


Ya, itulah alasannya. Solusi yang lebih baik adalah dengan menggunakan load-event jQuery.
Frank Bannister

6
$(window).load(function(){ ... });membantu dalam kasus saya
kolypto

16

Ada banyak diskusi dalam jawaban yang diterima tentang masalah di mana onloadacara tidak menyala jika gambar dimuat dari cache WebKit.

Dalam kasus saya, onloadkebakaran untuk gambar yang di-cache, tetapi ketinggian dan lebarnya masih 0. Sederhana setTimeoutmemecahkan masalah bagi saya:

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

Saya tidak dapat berbicara tentang mengapa onloadacara tersebut diaktifkan bahkan ketika gambar diambil dari cache (peningkatan jQuery 1.4 / 1.5?) - tetapi jika Anda masih mengalami masalah ini, mungkin kombinasi dari jawaban saya dan var src = img.src; img.src = ""; img.src = src;tekniknya akan kerja.

(Perhatikan bahwa untuk tujuan saya, saya tidak peduli tentang dimensi yang telah ditentukan sebelumnya, baik dalam atribut gambar atau gaya CSS - tetapi Anda mungkin ingin menghapusnya, sesuai jawaban Xavi. Atau mengkloning gambar.)


Saya punya masalah dengan IE7 & IE8. setTimeout () bekerja untuk saya untuk browser tersebut. Terima kasih!
Vasile Tomoiaga

11

ini bekerja untuk saya (safari 3.2), dengan menembak dari dalam window.onloadacara:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

Ya! Tidak berfungsi dari $ (dokumen). Sudah (fungsi () {}); Terima kasih! Itu harus memiliki gambar dimuat penuh sebelum dapat membacanya. Tentu saja.
Frank Bannister

8

Anda dapat secara program mendapatkan gambar dan memeriksa dimensi menggunakan Javascript tanpa harus mengacaukan DOM sama sekali.

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

2
Ini solusi terbaik! Ini bekerja bahkan jika gambar tidak dimuat atau di-cache.
marlar

6

Bagaimana dengan image.naturalHeightdan image.naturalWidthproperti?

Tampaknya berfungsi dengan baik kembali beberapa versi di Chrome, Safari dan Firefox, tetapi tidak sama sekali di IE8 atau bahkan IE9.


ini tidak berfungsi dalam kasus saya. memberi saya NaN sebagai imbalan
saadk

5

Bagaimana kami mendapatkan dimensi nyata yang benar tanpa gambar nyata yang berkedip:

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

Ini bekerja dengan <img class = "toreaddimensions" ...


5

Jquery memiliki dua properti yang disebut naturalWidth dan naturalHeight, yang dapat Anda gunakan dengan cara ini.

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

Di mana my-img adalah nama kelas yang digunakan untuk memilih gambar saya.


2
Ini bukan metode jQuery. naturalWidth(dan tinggi) adalah properti pada objek elemen gambar. developer.mozilla.org/en/docs/Web/API/HTMLImageElement
sandstrom

3

Seperti yang dinyatakan sebelumnya, jawaban Xavi tidak akan berfungsi jika gambar ada di cache. Masalahnya menanggapi webkit yang tidak memecat acara pemuatan pada gambar yang di-cache, jadi jika attrs lebar / tinggi tidak diatur secara eksplisit dalam tag img, satu-satunya cara yang dapat diandalkan untuk mendapatkan gambar adalah dengan menunggu window.loadacara dipecat.

The window.loadacara akan api selalu , sehingga aman untuk mengakses lebar / tinggi dari dan img setelah itu tanpa trik apapun.

$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});

Jika Anda perlu mendapatkan ukuran gambar yang dimuat secara dinamis yang mungkin di-cache (dimuat sebelumnya), Anda dapat menggunakan metode Xavi ditambah string kueri untuk memicu penyegaran cache. The downside adalah bahwa hal itu akan menyebabkan permintaan lain ke server, untuk img yang sudah di-cache dan harus sudah tersedia. Webkit Bodoh.

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});

ps: jika Anda sudah memiliki QueryString img.src, Anda harus menguraikannya dan menambahkan param tambahan untuk menghapus cache.


1
Blok kode pertama hanya mendapatkan dimensi elemen dalam DOM yang dimuat, bukan dari gambar itu sendiri ...
BasTaller

1
Ini adalah solusi Tercepat & Paling Efektif. Tidak ada plugin, tidak ada trik! Saya akan memposting jawaban yang sama tetapi menemukan jawaban Anda.
vantrung -cuncon

2

Seperti yang dikatakan Luke Smith, pemuatan gambar berantakan . Itu tidak dapat diandalkan di semua browser. Fakta ini memberi saya rasa sakit yang luar biasa. Gambar yang di-cache tidak akan memadamkan acara sama sekali di beberapa browser, jadi mereka yang mengatakan "memuat gambar lebih baik daripada setTimeout" salah.

Solusi Luke Smith ada di sini.

Dan ada diskusi menarik tentang bagaimana kekacauan ini dapat ditangani di jQuery 1.4.

Saya telah menemukan bahwa cukup dapat diandalkan untuk mengatur lebar ke 0, kemudian menunggu properti "lengkap" menjadi kenyataan dan properti lebar menjadi lebih besar dari nol. Anda juga harus memperhatikan kesalahan.


Tautan kedua dalam jawaban sudah mati.
Pang


2

Situasi saya mungkin sedikit berbeda. Saya secara dinamis mengubah src gambar melalui javascript dan diperlukan untuk memastikan bahwa gambar baru berukuran proporsional agar sesuai dengan wadah tetap (di galeri foto). Saya awalnya hanya menghapus atribut lebar dan tinggi gambar setelah dimuat (melalui acara memuat gambar) dan mengatur ulang ini setelah menghitung dimensi yang diinginkan. Namun, itu tidak berfungsi di Safari dan mungkin IE (saya belum mengujinya di IE secara menyeluruh, tetapi gambarnya bahkan tidak muncul, jadi ...).

Lagi pula, Safari menyimpan dimensi gambar sebelumnya sehingga dimensi selalu satu gambar di belakang. Saya berasumsi bahwa ini ada hubungannya dengan cache. Jadi solusi paling sederhana adalah dengan hanya mengkloning gambar dan menambahkannya ke DOM (penting untuk ditambahkan ke DOM yang mendapatkan dengan dan tinggi). Berikan nilai visibilitas tersembunyi pada gambar (jangan gunakan tampilan karena tidak akan berfungsi). Setelah Anda mendapatkan dimensi, hapus klon.

Ini kode saya menggunakan jQuery:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);

Solusi ini berfungsi dalam hal apa pun.



1

Baru-baru ini saya perlu menemukan lebar dan tinggi untuk mengatur ukuran default .dialog mewakili grafik. Solusi yang saya gunakan adalah:

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

Bagi saya ini bekerja di FF3, Opera 10, IE 8,7,6

PS Anda mungkin menemukan beberapa solusi lagi mencari di dalam beberapa plugin seperti LightBox atau ColorBox


1

Untuk menambah jawaban Xavi, gitgub Paul Irish, David Desandro, gitgub menawarkan fungsi yang disebut imagesLoaded () yang bekerja dengan prinsip yang sama, dan mengatasi masalah beberapa gambar cache peramban yang tidak mengaktifkan peristiwa .load () (dengan smart_src pintar -> data_uri -> switching original_src).

Ini banyak digunakan dan diperbarui secara berkala, yang berkontribusi untuk itu menjadi solusi paling kuat untuk masalah ini, IMO.


1
Anda dapat menemukan versi terbaru dari imagesLoadedfungsi di sini: github.com/desandro/imagesloaded
bejonbee

Yap, David Desandro adalah hosting fungsi sekarang. Terima kasih telah mengingatkan saya pada @somethingkindawierd, memperbarui jawaban saya.
RobW

1

Ini berfungsi untuk gambar yang di-cache dan dimuat secara dinamis.

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

Untuk menggunakan skrip ini:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

Demo: http://jsfiddle.net/9543z/2/


1

Saya telah melakukan beberapa fungsi utilitas pemecahan masalah, menggunakan plugin jquery imagesLoaded: https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

Anda dapat menggunakan ini dengan mengirimkan url, fungsi, dan konteksnya. Fungsi dilakukan setelah gambar dimuat dan mengembalikan gambar yang dibuat, lebar dan tinggi.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)

1

Jika gambar sudah digunakan, Anda sholud:

  1. atur simulasi gambar ke awal

    image.css ('lebar', 'awal'); image.css ('tinggi', 'awal');

  2. dapatkan dimensi

    var originalWidth = $ (this) .width (); var originalHeight = $ (ini) .height ();


1

Anda dapat menggunakan properti naturalWidth dan naturalHeight dari elemen gambar HTML. (Ini info lebih lanjut ).

Anda akan menggunakannya seperti ini:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

Sepertinya ini berfungsi di semua browser kecuali pada IE dari versi 8 dan di bawah.


Ya, tidak ada lagi IE8: D
Jair Reina

0

Saya memeriksa jawaban Dio dan itu berhasil untuk saya.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Pastikan Anda memanggil semua fungsi Anda juga. yang menangani dengan ukuran gambar dalam fungsi recaller fadeIn ().

Terima kasih untuk ini.


0

Saya menggunakan pendekatan yang berbeda, cukup buat panggilan Ajax ke server untuk mendapatkan ukuran gambar saat objek gambar sedang digunakan.

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

dan tentu saja kode sisi server:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

1
ini bukan solusi hebat dan akan memakan waktu lebih lama daripada solusi lain karena pemuatan AJAX.
halfpastfour.am

0

Ini berfungsi lintas browser

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];              

dapatkan dimensi dengan menggunakan

$(this).data('dimensions').width;
$(this).data('dimensions').height;

Bersulang!



0
$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        }); 

// Kode ini membantu menampilkan gambar dengan dimensi 200 * 274



0

Menemukan thread ini mencoba menemukan jawaban untuk pertanyaan saya sendiri. Saya mencoba untuk mendapatkan lebar / tinggi gambar dalam fungsi SETELAH loader, dan terus menghasilkan 0. Saya merasa seperti ini yang mungkin Anda cari, meskipun, karena berfungsi untuk saya:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}

0

Lihat repositori ini di github!

Contoh yang bagus untuk memeriksa Lebar dan Tinggi menggunakan Javascript

https://github.com/AzizAK/ImageRealSize

--- Diedit diminta dari beberapa komentar ..

Kode Javascript:

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

dan kode HTML:

<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>

jika memungkinkan Anda juga dapat menambahkan beberapa baris kode di sini. karena tautan mungkin berubah seiring waktu
Tejus Prasad

-1

Untuk fungsi di mana Anda tidak ingin mengubah penempatan atau gambar asli.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

1
Ini sama sekali tidak bekerja. Ini akan kembali tidak terdefinisi untuk keduanya
Chris Cinelli
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.