JavaScript: รับขนาดภาพ

97

ฉันมีเพียง URL ไปยังรูปภาพ ฉันต้องการกำหนดความสูงและความกว้างของภาพนี้โดยใช้ JavaScript เท่านั้น ผู้ใช้ไม่สามารถมองเห็นรูปภาพบนเพจได้ ฉันจะรับขนาดได้อย่างไร?

javascript html image

— JQueeeer
แหล่งที่มา

2

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

— stecb

1

จริงคำตอบนี้เป็นเพียงคนเดียวที่ถูกต้องจริงๆตามที่คุณต้องรอจนกว่าภาพจะถูกโหลด

— Shadow Wizard is Ear For You

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;

— ชูมิ
แหล่งที่มา

1

เว้นแต่คุณจะต้องได้รับมิติข้อมูลพร้อมกัน ในกรณีนี้คุณต้องแทรกรูปภาพลงในเอกสาร (โดยใช้ตำแหน่งที่แน่นอนอยู่ที่ใดที่หนึ่งนอกวิวพอร์ต) จากนั้นขนาดจะพร้อมใช้งานทันทีหลังจากเรียก document.appendChild ()

— JustAndrei

1

ทำไมonloadก่อนตั้ง url ของภาพ?

— Ajay Gaur

23

@AjayGaur เนื่องจากonloadเป็นผู้ฟังที่จะถูกเรียกแบบอะซิงโครนัสหากโหลดรูปภาพอย่างถูกต้อง หากคุณตั้งค่า Listener หลังจากตั้งค่า url รูปภาพจะโหลดได้ก่อนที่โค้ดจะไปถึงการตั้งค่า onload เองส่งผลให้ผู้ฟังไม่ถูกเรียก การใช้อุปมาอุปไมยหากคุณกำลังเสิร์ฟน้ำให้ตัวเองหนึ่งแก้วคุณต้องเทน้ำก่อนแล้วค่อยใส่แก้วต่อไปหรือไม่? หรือคุณใส่แก้วก่อนแล้วค่อยรินน้ำ?

— biomorgoth

3

img.naturalWidth และ img.naturalHeight คือคำตอบที่ถูกต้อง

— Kamlesh

1

ขอบคุณ @Kamlesh ฉันต้องการมิติที่เป็นธรรมชาติ

— jahooma

43

สร้างไฟล์ Image

var img = new Image();

ตั้งค่า src

img.src = your_src

รับwidthและheight

//img.width
//img.height

— nc3b
แหล่งที่มา

17

ฉันได้รับ 0 สำหรับความกว้างและความสูงโดยใช้รหัสที่แน่นอนนี้

— Adam Casey

11

ดูเหมือนว่าภาพจะต้องโหลดซึ่งก็สมเหตุสมผลดี

— Adam Casey

3

ข้อมูลเพิ่มเติม - แม้ว่าจะใช้ได้ผลกับฉันเป็นครั้งแรก แต่ก็ไม่ต่อเนื่อง ฉันคิดว่าปัญหาเกิดจากการไม่ได้ดาวน์โหลดภาพ ฉันแก้ไขโดยการรันโค้ดซึ่งใช้มิติในตัวจัดการเหตุการณ์ onload ดังนี้: img.onload = function () {};

— Shumii

3

รหัสนี้ใช้ได้ตราบเท่าที่รูปภาพอยู่ในแคชของเบราว์เซอร์ เมื่อแคชไม่ถูกต้องหรือถูกลบ มันจะไม่ทำงาน ดังนั้นไม่น่าเชื่อถือจริงๆ

— bharatesh

2

ไม่ทำงานเนื่องจากยังไม่ได้โหลดรูปภาพ - การโหลดรูปภาพเสร็จสิ้นแบบอะซิงโครนัสดังนั้นคุณต้องรอให้โหลดเหตุการณ์

— user1702401

5

สิ่งนี้ใช้ฟังก์ชันและรอให้มันเสร็จสมบูรณ์

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

— เดวิดดันแฮม
แหล่งที่มา

1

เหตุใดฟังก์ชันที่ใช้ซ้ำได้นี้กับการเลื่อนเวลาจึงถูกลดลง!

— DavidDunham

'ใช้เฉพาะ JavaScript' และนี่คือ jQuery ฉันเดาว่า

— Apolo

คุณได้รับคะแนนโหวตจากฉันแม้ว่าจะใช้ jQuerry แนวทางคือสิ่งที่สำคัญ

— krankuba

2

naturalWidthและ 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%; }

— Bitterblue
แหล่งที่มา

1

รับขนาดภาพด้วย jQuery

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

รับขนาดภาพด้วย JavaScript

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

รับขนาดภาพด้วย JavaScript (เบราว์เซอร์สมัยใหม่ IE9 +)

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

ใช้ด้านบนง่ายๆคือ getMeta (" http://example.com/img.jpg ");

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

— ซันนี่ Mahajan
แหล่งที่มา

0

คำถามที่คล้ายกันถามและตอบโดยใช้ JQuery ที่นี่:

รับความกว้างความสูงของภาพระยะไกลจาก url

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

— ลุค Knepper
แหล่งที่มา

0

หากคุณมีไฟล์ภาพจากแบบฟอร์มการป้อนข้อมูลของคุณ คุณสามารถใช้แบบนี้

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
แหล่งที่มา

-3

รหัสต่อไปนี้จะเพิ่มความสูงและความกว้างของแอตทริบิวต์ภาพให้กับแต่ละภาพในหน้า

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

— ผู้ทดสอบ
แหล่งที่มา

13

คำถามเกี่ยวกับการรับขนาดภาพโดยไม่แสดงภาพให้ผู้ใช้เห็น การตั้งค่าแอตทริบิวต์ความกว้างและความสูงของภาพหลังจากแสดงภาพแล้วไม่สมเหตุสมผล

— Yaroslav Stavnichiy