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

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.

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.

Gunakan atribut naturalHeightdan naturalWidthdari HTML5 .

Sebagai contoh:

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

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

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.

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.

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

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

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

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.

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

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.

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.

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.

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

Dari komentar Chris: http://api.jquery.com/load-event/

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.

Sekarang ada plugin jQuery event.special.load,, untuk menangani kasus-kasus di mana peristiwa pemuatan pada gambar yang di-cache tidak menyala: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

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

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.

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/

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)

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

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.

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.

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

?>

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!

Saran lain adalah menggunakan plugin imagesLoaded .

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});

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

Berikut ini adalah solusi lintas peramban yang memicu peristiwa ketika gambar yang Anda pilih dimuat: http://desandro.github.io/imagesloaded/ Anda dapat melihat tinggi dan lebar dalam fungsi imagesLoaded ().

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

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>

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

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