JavaScript: Resim boyutlarını alın

97

Sadece bir resmin URL'sine sahibim. Bu resmin yüksekliğini ve genişliğini yalnızca JavaScript kullanarak belirlemem gerekiyor. Resim, sayfada kullanıcı tarafından görülemez. Boyutlarını nasıl alabilirim?

javascript html image

— JQueeeer
kaynak

2

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

1

görüntü yüklenene kadar beklemeniz gerektiğinden aslında bu cevap gerçekten doğru olan tek cevaptır .

— Gölge Sihirbazı Sizin İçin Kulak

198

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

— Shumii
kaynak

1

Boyutları eşzamanlı olarak elde etmeniz gerekmedikçe. Bu durumda, görüntüyü belgeye eklemeniz yeterlidir (görünüm alanının dışında bir yerde mutlak bir konum kullanarak) - o zaman boyutlar document.appendChild () çağrıldıktan hemen sonra kullanılabilir.

— JustAndrei

1

Neden onloadresmin url'sini ayarlamadan önce?

— Ajay Gaur

23

@AjayGaur çünkü onloadgörüntü doğru yüklenirse eşzamansız olarak çağrılacak bir dinleyici. URL'yi ayarladıktan sonra dinleyiciyi ayarlarsanız, görüntü, kod, onload'ın kendisini ayarlamaya ulaşmadan hemen önce yüklenebilir ve bu da dinleyicinin asla çağrılmamasıyla sonuçlanır. Benzetmelerle, kendinize bir bardak suyla servis yapıyorsanız, önce suyu doldurup sonra bardağı doldurup doldurur musunuz? Yoksa önce bardağı koyup sonra suyu içine mi koyarsınız?

— biomorgoth

3

img.naturalWidth ve img.naturalHeight Doğru cevap

— Kamlesh

1

Teşekkür ederim @Kamlesh Doğal boyutlara ihtiyacım vardı.

— jahooma

43

Yeni yap Image

var img = new Image();

Yı kur src

img.src = your_src

alın widthveheight

//img.width
//img.height

— nc3b
kaynak

17

Bu tam kodu kullanarak genişlik ve yükseklik için 0 almaya devam ediyorum.

— Adam Casey 18'12

11

Görünüşe göre görüntünün yüklenmesi gerekiyor, bu da mantıklı.

— Adam Casey

3

ek bilgi - bu benim için ilk kez işe yarasa da aralıklıydı. Sanırım sorun, görselin indirilmemiş olması. Onload olay işleyicisinde boyutu kullanan kodu şu şekilde çalıştırarak düzelttim: img.onload = function () {};

— Shumii

3

Bu kod, görüntü tarayıcı önbelleğinde olduğu sürece çalışır. Önbellek geçersiz olduğunda veya silindiğinde. Çalışmayacak. Yani gerçekten güvenilir değil.

— bharatesh

2

Görüntü henüz yüklenmediğinden bu işe yaramıyor - görüntü yükleme eşzamansız olarak yapıldığından yükleme olayını beklemeniz gerekir.

— user1702401

5

Bu, işlevi kullanır ve tamamlanmasını bekler.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

— David Dunham
kaynak

1

Ertelemeli bu yeniden kullanılabilir işlev neden reddedilsin ?!

— DavidDunham

'sadece JavaScript kullanıyor' ve bu jQuery, sanırım

— Apolo

JQuerry kullanmasına rağmen benden oy alırsınız. Yaklaşım önemli.

— krankuba

2

naturalWidth ve naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

— Acı mavi
kaynak

1

JQuery ile görüntü boyutunu alın

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

JavaScript ile resim boyutunu alın

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

JavaScript ile resim boyutunu alın (modern tarayıcılar, IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Yukarıdakini basitçe şu şekilde kullanın: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

— Güneşli Mahajan
kaynak

0

JQuery kullanılarak burada benzer soru soruldu ve cevaplandı:

Uzak resmin genişlik yüksekliğini url'den alın

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");

— Luke Knepper
kaynak

0

giriş formunuzdan görüntü dosyanız varsa. bunun gibi kullanabilirsin

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

— Raka Adi Nugroho
kaynak

-3

Aşağıdaki kod , sayfadaki her bir resme resim niteliği yüksekliği ve genişliği ekleyin .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>

— Testere
kaynak

13

Soru, kullanıcıya görüntü göstermeden görüntü boyutlarının elde edilmesiyle ilgiliydi. Görüntü gösterildikten sonra görüntü genişliği ve yükseklik niteliklerinin ayarlanması kesinlikle bir anlam ifade etmiyor.

— Yaroslav Stavnichiy