JavaScript ile bir görüntünün gerçek genişliğini ve yüksekliğini elde etmek ister misiniz? (Safari / Chrome'da)

Bir jQuery eklentisi oluşturuyorum.

Safari'de Javascript ile gerçek görüntü genişliğini ve yüksekliğini nasıl elde edebilirim?

Firefox 3, IE7 ve Opera 9 ile çalışır:

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

Ancak Webkit'te Safari ve Google Chrome değerleri gibi tarayıcılar 0'dır.

Webkit tarayıcıları, görüntü yüklendikten sonra height ve width özelliğini ayarlar. Zaman aşımlarını kullanmak yerine, bir görüntünün onload etkinliğini kullanmanızı öneririm. İşte kısa bir örnek:

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

CSS'nin görüntünün boyutları üzerindeki etkilerinden kaçınmak için, yukarıdaki kod görüntünün hafızada bir kopyasını oluşturur. Bu, FDisk tarafından önerilen çok akıllı bir çözümdür .

Ayrıca naturalHeightve naturalWidthHTML5 özelliklerini de kullanabilirsiniz .

HTML5'tekinaturalHeight ve naturalWidthniteliklerini kullanın .

Örneğin:

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

IE9 +, Chrome, Firefox, Safari ve Opera'da ( istatistikler ) çalışır.

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

Görüntü veya görüntü boyutları özelliklerinden stil kaldırmanıza gerek yoktur. Javascript ile bir öğe oluşturun ve oluşturulan nesne genişliğini elde edin.

Temel sorun, WebKit tarayıcılarının (Safari ve Chrome) JavaScript ve CSS bilgilerini paralel olarak yüklemesidir. Bu nedenle, CSS'nin stil efektleri hesaplanmadan önce JavaScript çalıştırılabilir ve yanlış yanıt döndürülür. JQuery'de, çözümün document.readyState == 'tamamlandı', .eg,

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

Genişlik ve yükseklik gittikçe ... yaptığınız şeye bağlı olarak, kenarlıklar ve dolgu gibi şeyleri içeren offsetWidth ve offsetHeight isteyebilirsiniz.

onloadWebKit önbelleğinden bir resim yüklenirse etkinliğin tetiklenmediği bir sorun hakkında kabul edilen cevapta çok fazla tartışma var .

Benim durumumda, onloadönbelleğe alınmış görüntüler için yangın çıkıyor, ancak yükseklik ve genişlik hala 0. Basit bir setTimeoutsorunu benim için çözdü:

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

onloadGörüntü önbellekten yüklendiğinde bile olayın neden çalıştığını söyleyemem (jQuery 1.4 / 1.5'in iyileştirilmesi?) - ancak hala bu sorunu yaşıyorsanız, belki cevabımın ve var src = img.src; img.src = ""; img.src = src;tekniğin bir kombinasyonu iş.

(Benim amacım için, resmin özniteliklerinde veya CSS stillerinde önceden tanımlanmış boyutlarla ilgili olmadığımı unutmayın - ancak Xavi'nin cevabına göre bunları kaldırmak isteyebilirsiniz. Veya görüntüyü klonlayın.)

bu benim için (safari 3.2), window.onloadolay içinden ateş ederek çalışır :

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

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

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

DOM ile uğraşmak zorunda kalmadan görüntüyü programlı olarak alabilir ve Javascript kullanarak boyutları kontrol edebilirsiniz.

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

Ne hakkında image.naturalHeightve image.naturalWidthözellikleri?

Chrome, Safari ve Firefox'ta oldukça az sayıda sürüm çalışıyor, ancak IE8 veya IE9'da hiç çalışmıyor.

Göz kırpma gerçek bir görüntü olmadan doğru gerçek boyutları nasıl elde ederiz:

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

<İmg class = "toreaddimensions" ile çalışır ...

Jquery, naturalWidth ve naturalHeight adlı iki özelliğe sahiptir, bu şekilde kullanabilirsiniz.

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

My-img, resmimi seçmek için kullanılan bir sınıf adıdır.

Daha önce belirtildiği gibi, görüntüler önbellekte ise Xavi yanıtı çalışmaz. Sorun webkit'e önbelleğe alınan görüntülerde load olayını tetiklememesine yanıt veriyor, bu nedenle genişlik / yükseklik izinleri img etiketinde açıkça ayarlanmadıysa, görüntüleri almanın tek güvenilir yolu window.loadolayın tetiklenmesini beklemektir .

window.loadOlay ateş edeceği zaman herhangi bir hile olmadan bundan sonra genişlik / yükseklik ve img erişmek böylece güvende.

$(window).load(function(){

   //these all work

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

});

Önbelleğe alınabilecek (önceden yüklenmiş) dinamik olarak yüklenmiş görüntülerin boyutunu almanız gerekiyorsa, önbellek yenilemesini tetiklemek için Xavi yöntemini ve bir sorgu dizesini kullanabilirsiniz. Dezavantajı, zaten önbelleğe alınmış ve zaten kullanılabilir olması gereken bir img için sunucuya başka bir istek neden olacaktır. Aptal Webkit.

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: img.srcZaten bir QueryString'iniz varsa, onu ayrıştırmanız ve önbelleği temizlemek için fazladan param eklemeniz gerekir.

Luke Smith'in dediği gibi, görüntü yükü bir karmaşa . Tüm tarayıcılarda güvenilir değildir. Bu gerçek bana büyük acı verdi. Önbelleğe alınmış bir resim, bazı tarayıcılarda etkinliği hiç tetiklemez, bu nedenle "resim yükü setTimeout'tan daha iyidir" diyenler yanlıştır.

Luke Smith'in çözümü burada.

Ve ilginç bir tartışma var bu karmaşa jQuery 1.4'te nasıl ele alınabileceği hakkında var.

Genişliği 0 olarak ayarlamak oldukça güvenilir bulduk, sonra "tam" özelliği doğru gitmek ve width özelliği sıfırdan büyük gelmesini bekleyin. Hataları da izlemelisiniz.

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

Chris'in yorumundan: http://api.jquery.com/load-event/

Durumum muhtemelen biraz farklı. Bir görüntünün src'yi javascript aracılığıyla dinamik olarak değiştiriyorum ve yeni görüntünün sabit bir kaba (bir fotoğraf galerisinde) sığacak şekilde boyutlandırılmasını sağlamak için gerekli. Başlangıçta görüntünün yüklendikten sonra görüntünün genişlik ve yükseklik özelliklerini kaldırdım (görüntünün yükleme olayı aracılığıyla) ve tercih edilen boyutları hesapladıktan sonra bunları sıfırladım. Ancak, bu Safari ve muhtemelen IE çalışmıyor (Ben iyice IE test değil, ama görüntü bile göstermez, yani ...).

Her neyse, Safari önceki görüntünün boyutlarını koruyor, böylece boyutlar her zaman bir resim geride kalıyor. Bunun önbellekle bir ilgisi olduğunu varsayıyorum. Bu yüzden en basit çözüm, görüntüyü klonlamak ve DOM'a eklemek (bunun DOM ile birlikte ve yüksekliğini elde etmek önemlidir). Görüntüye gizli bir görünürlük değeri verin (işe yaramadığından hiçbirini görüntüleme özelliğini kullanmayın). Boyutları aldıktan sonra klonu kaldırın.

Kodumu jQuery kullanarak İşte:

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

Bu çözüm her durumda işe yarar.

event.special.loadÖnbelleğe alınmış bir resimdeki load olayının tetiklenmediği durumlarla başa çıkmak için bir jQuery eklentisi var : http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Son zamanlarda grafiği temsil eden .dialog varsayılan boyutunu ayarlamak için genişlik ve yükseklik bulmak gerekiyordu. Kullandığım çözüm:

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

Benim için bu FF3, Opera 10, IE'de çalışıyor 8,7,6

Not: LightBox veya ColorBox gibi bazı eklentilerin içine bakarak daha fazla çözüm bulabilirsiniz

Xavi'nin cevabına eklemek için Paul Irish'ın github David Desandro'nun gitgub imagesLoaded () adlı bir işlev sunuyor , aynı ilkeler üzerinde çalışan ve bazı tarayıcının önbelleğe alınmış görüntülerinin (akıllı orijinal_src ile -> data_uri -> original_src anahtarlama).

Soruna en sağlam çözüm olan IMO'ya katkıda bulunan, düzenli olarak yaygın olarak kullanılmaktadır ve güncellenmektedir.

Bu, hem önbelleğe alınmış hem de dinamik olarak yüklenmiş görüntüler için çalışır.

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

Bu komut dosyasını kullanmak için:

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

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

ImagesLoaded jquery eklentisini kullanarak bazı geçici yardımcı program işlevlerini yaptım: 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}));
            },

Bunu url, işlev ve bağlamını ileterek kullanabilirsiniz. İşlev, görüntü yüklendikten ve oluşturulan görüntüyü, genişliğini ve yüksekliğini döndürdükten sonra gerçekleştirilir.

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

Görüntü zaten kullanılıyorsa şunları söylemelisiniz:

1. görüntü simülasyonlarını başlangıç ​​olarak ayarla

   image.css ('genişlik', 'başlangıç'); image.css ('yükseklik', 'başlangıç');

2. boyutları al

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

HTML görüntü öğesinin naturalWidth ve naturalHeight özelliklerini kullanabilirsiniz. (İşte daha fazla bilgi ).

Bunu şöyle kullanırsınız:

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

Bu, sürüm 8 ve altındaki IE hariç tüm tarayıcılarda çalışıyor gibi görünüyor.

Dio'nun cevabını kontrol ettim ve benim için harika çalışıyor.

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

Tüm işlevlerinizi de çağırdığınızdan emin olun. fadeIn () 'in yeniden şarj fonksiyonundaki görüntü boyutu ile başa çıkmak.

Bunun için teşekkürler.

Farklı bir yaklaşım kullanıyorum, sadece görüntü nesnesi kullanılırken görüntü boyutunu almak için sunucuya Ajax çağrısı yapın.

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

ve tabii ki sunucu tarafı kodu:

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

?>

Bu çapraz tarayıcı çalışır

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

kullanarak boyutları elde edin

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

Şerefe!

Başka bir öneri imagesLoaded eklentisini kullanmaktır .

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

// Bu kod, görüntüyü 200 * 274 boyutuyla göstermeye yardımcı olur

Seçtiğiniz görüntüler yüklendiğinde bir etkinliği tetikleyen bir çapraz tarayıcı çözümü: http://desandro.github.io/imagesloaded/ imagesLoaded () işlevi içinde yüksekliği ve genişliği arayabilirsiniz.

Kendi sorum için bir cevap bulmaya çalışırken bu konu üzerine tökezledi. Yükleyiciden SONRA bir fonksiyonda bir görüntünün genişliğini / yüksekliğini almaya çalışıyordum ve 0 ile gelmeye devam ettim.

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

Github'daki bu depoya göz atın!

Javascript kullanarak Genişlik ve Yüksekliği kontrol etmek için harika bir örnek

https://github.com/AzizAK/ImageRealSize

--- Düzenlenmiş bazı yorumlardan istenir ..

Javascript kodu:

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

ve HTML kodu:

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

Orijinal yerleşimi veya görüntüyü değiştirmek istemediğiniz işlevler için.

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