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


278

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.


4
Kabul edilen cevap resim yükleme olayını kullanır. Mükemmel bir mantıklı, ancak görüntülerin önbelleğe alınabileceği durumlarda (benim dehşetimden çok) güvenilir olmayan bir çözüm olduğu ortaya çıkıyor.
Nosredna

Bunu benim üstlenmem size yardımcı olabilir, en son Webkit'te test edildi. stackoverflow.com/questions/318630/…
xmarcos

5
@Nosredna, görüntüler önbelleğe alınmış olsa bile tetiklenecek imagesLoaded işlevi ile ilgilenebilirsiniz .
bejonbee

7
Bu sorunun doğru cevabı, naturalWidth ve naturalHeight özelliklerini kullanmaktır. Bilgisayar korsanlığı gerekmez.
David Johnstone

Belge hazırlığı yerine pencere yükünde tam olarak ne yaptığınızı da yapabilirsiniz
user1380540

Yanıtlar:


356

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 .


5
Bu zekice, $ (img) .load () yapabileceğinizi bilmiyordum;
SeanJA

3
Ek olarak widthve heightsize muhtemelen de kaldırmanız gerekir min-width, min-height, max-widthve max-heightonlar da görüntü boyutlarını etkileyebilir olarak.
mqchen

5
FDisk'in çözümü çok zekidir. Ne yazık ki yazdığı çözüm, yalnızca görüntü önbelleğe alınmışsa veya sayfa indirmeyi bitirmişse işe yarayacaktır. Görüntü önbelleğe alınmazsa veya bu kod daha önce çağrılırsa window.onload, bir yükseklik / genişlik 0 döndürülebilir. Her durumda, FDisk'in fikrini yukarıdaki çözüme entegre ettim.
Xavi

5
console.log (pic_real_height) denediğimde her seferinde tanımsızım. krom, FF, IE9.
helgatheviking

10
Burada sahip olabileceğiniz sorun, load()senkronize olmayan bir şekilde yürütülecek olmasıdır, bu nedenle erişmek istiyorsanız widthve height- henüz ayarlanmamış olabilir. Bunun yerine load()kendi içinde “sihir” yapın !
daGrevis

286

HTML5'tekinaturalHeight ve naturalWidthniteliklerini kullanın .

Örneğin:

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

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


3
@DavidJohnstone Bunlara bir örnek yardımcı olabilir. Ama katılıyorum, kesinlikle daha yüksek olmayı hak ediyor.
Stephen

5
Görüntü önbellekte zaten mevcut değilse, bu FireFox'un (30.0) en son sürümünde çalışmaz.
Joel Kinzel

1
David Johnstone ile aynı fikirdeyim. Bu harika bir haber.
jchwebdev

Hala görüntünün yüklenmesini beklemeniz gerektiğini unutmayın
Jesús Carrera

Hayır, clientHeight / clientWidth sorunun ne istediğini açık bir şekilde yapmaz. Görüntünün sayfada göründüğü gibi yüksekliğini ve genişliğini değil, görüntünün yüksekliğini ve genişliğini döndürmesi gerekir. naturalWidth ve naturalHeight doğrudur.
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;
}

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.


3
Birkaç aydan beri, bir görüntüyü jquery ile klonlama (en son Chrome'u kullanarak) ve özelliklerini alma, her zaman 0x0 döndürür. Şimdiye kadar çalışan tek çözüm budur (bu sayfadaki tüm diğerleri test etmişlerdir) Döndürmeden önce, t = null.
Omiod

1
FDisk, jQuery ile görüntünün klonlanmasını önermez. Yeni bir Imagenesne yaratmayı ve sonra widthmülküne bakmayı öneriyor . Bu basit ve zarif bir yaklaşımdır. FDisk, benim oyum var. :)
davidchambers

3
Bu css sorunlarını önlemek için çok akıllı bir yoldur. Ne yazık ki yukarıda yazılan çözüm yalnızca görüntü önbelleğe alınmışsa veya indirmeyi zaten bitirmişse işe yarayacaktır. Görüntü önbelleğe alınmazsa veya bu kod daha önce çağrılırsa window.onload, 0 genişliği döndürülebilir.
Xavi

1
Bu yaklaşımı resim galerisindeki cep telefonları için bir web sitesinde kullanıyorum. Daha büyük görüntüler daha sonra çözünürlük% 100 css ve daha küçük orijinal boyutlarda görüntülenir.
FDisk

1
Xavi'nin belirttiği gibi, bu IE8'de başarısız olur ve bazen görüntü önbelleğe alınmasına bağlı olarak. Bu yüzden bu yaklaşımla birleştirdim ve mükemmel çalışıyor: önce load olayını bağlayın, ardından görüntü nesnesini kaynağına atayın stackoverflow.com/questions/4921712/…
Kevin C.

16

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.


Evet, nedeni bu. Daha iyi bir çözüm, jQuery'nin load-event'ini kullanmaktır.
Frank Bannister

6
$(window).load(function(){ ... });benim durumumda yardım
kolypto

16

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


IE7 ve IE8 ile bu çok sorun vardı. setTimeout () benim için bu tarayıcılarda çalıştı. Teşekkür ederim!
Vasile Tomoiaga

11

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

Evet! $ (Document) .ready (function () {}) 'dan çalışmadı; Teşekkürler! Görüntüyü okuyabilmesi için tam olarak yüklenmiş olması gerekir. Elbette.
Frank Bannister

8

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

2
Bu en iyi çözüm! Görüntü önceden yüklenmemiş veya önbelleğe alınmamış olsa bile çalışır.
marlar

6

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.


bu benim durumumda çalışmıyor. karşılığında bana NaN veriyor
saadk

5

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


5

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.


2
Bunlar jQuery yöntemleri değildir. naturalWidth(ve yükseklik) resim öğesi nesnesindeki özelliklerdir. developer.mozilla.org/tr/docs/Web/API/HTMLImageElement
sandstrom

3

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.


1
İlk kod bloğu, bir görüntünün kendisinden değil, yüklü
DOM'daki

1
Bu tam olarak En Hızlı ve En Etkili çözümdür. Eklenti yok, hile yok! Benzer bir cevap göndereceğim ama seninkini buldum.
vantrung -cuncon

2

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.


Cevaptaki ikinci bağlantı öldü.
Pang


2

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.



1

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


1

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.


1
imagesLoadedFonksiyonun güncellenmiş bir versiyonunu burada bulabilirsiniz: github.com/desandro/imagesloaded
bejonbee

Evet, David Desandro şu anda bu işleve ev sahipliği yapıyor. Hatırlattığın için teşekkürler @somethingkindawierd, cevabımı güncelledim.
RobW

1

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/


1

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)

1

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


1

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.


Evet, artık IE8: D
Jair Reina

0

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.


0

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

?>

1
bu harika bir çözüm değildir ve AJAX yüklemesi nedeniyle diğer çözümlerden daha uzun sürecektir.
halfpastfour.am

0

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!



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

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



0

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

0

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>

mümkünse buraya birkaç satır kod da ekleyebilirsiniz. bağlantılar timw üzerinde değişebilir
Tejus Prasad

-1

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

1
Bu kesinlikle işe yaramıyor. Her ikisi için de tanımsız dönecek
Chris Cinelli
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.