जावास्क्रिप्ट: छवि आयाम प्राप्त करें

Question

मेरे पास केवल एक छवि के लिए एक URL है। मुझे केवल जावास्क्रिप्ट का उपयोग करके इस छवि की ऊंचाई और चौड़ाई निर्धारित करने की आवश्यकता है। छवि पृष्ठ पर उपयोगकर्ता को दिखाई नहीं दे सकती है। मैं इसके आयाम कैसे प्राप्त कर सकता हूं?

Comments

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

— stecb

वास्तव में यह उत्तर केवल एक ही सही है, क्योंकि आपको छवि लोड होने तक इंतजार करना होगा।

— शैडो विजार्ड इयर फॉर यू यू

Answer 1

var img = new Image();

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

  // code here to use the dimensions
}

img.src = url;

Comments

जब तक आपको तुल्यकालिक रूप से आयाम प्राप्त करने की आवश्यकता न हो। उस स्थिति में आपको बस छवि को दस्तावेज़ में सम्मिलित करना होगा (व्यूपोर्ट के बाहर कहीं पूर्ण स्थिति का उपयोग करके) - फिर दस्तावेज़ कॉल करने के बाद आयाम उपलब्ध हैं ।appendChild ()।

— जस्टएंड्रेई

onloadछवि का url सेट करने से पहले क्यों है ?

— अजय गौड़

@ अजयगौर क्योंकि onloadएक श्रोता है जिसे छवि को सही ढंग से लोड किए जाने पर एसिंक्रोनसली कहा जाएगा। यदि आप url सेट करने के बाद श्रोता को सेट करते हैं, तो कोड लोड होने से पहले ही छवि लोड हो सकती है, जिसके परिणामस्वरूप श्रोता को कभी नहीं बुलाया जाएगा। उपमाओं का उपयोग करते हुए, यदि आप अपने आप को पानी के साथ एक गिलास परोस रहे हैं, तो क्या आप पहले पानी डालते हैं और अगले गिलास को भरने के लिए डालते हैं? या आप पहले ग्लास डालते हैं और फिर आप पानी डालते हैं?

— बायोमार्गथ

img.naturalWidth और img.naturalHeight सही उत्तर है

— कमलेश

शुक्रिया @ कमलेश मुझे प्राकृतिक आयामों की आवश्यकता थी।

— jahooma

Answer 2

एक नया बनाओ Image

var img = new Image();

ठीक src

img.src = your_src

widthऔर जाओheight

//img.width
//img.height

Comments

मैं इस सटीक कोड का उपयोग करके, चौड़ाई और ऊंचाई के लिए 0 प्राप्त करता रहता हूं।

— एडम केसी

ऐसा लगता है कि छवि को लोड करना है, जो समझ में आता है।

— एडम केसी

अतिरिक्त जानकारी - हालांकि यह मेरे लिए पहली बार काम किया था जब यह आंतरायिक था। मुझे लगता है कि समस्या इसलिए है क्योंकि छवि डाउनलोड नहीं की गई है। मैंने उस कोड को चलाकर तय किया जो ऑनलोड ईवेंट हैंडलर में आयाम का उपयोग करता है जैसे: img.onload = function () {};

— शुमाइ

यह कोड तब तक काम करता है, जब तक कि छवि ब्राउज़र कैश में है। एक बार कैश अमान्य या हटा दिया गया है। यह काम नहीं करेगा। तो वास्तव में विश्वसनीय नहीं है।

— भावेश

यह काम नहीं कर रहा है, क्योंकि छवि अभी तक लोड नहीं हुई है - छवि लोडिंग अतुल्यकालिक रूप से की जाती है, इसलिए आपको लोड घटना के लिए इंतजार करना होगा।

— user1702401

Answer 3

यह फ़ंक्शन का उपयोग करता है और इसके पूरा होने का इंतजार करता है।

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

Comments

क्यों deferants के साथ इस पुन: प्रयोज्य कार्य को कम किया जाएगा ?!

— डेविडधुम

'केवल जावास्क्रिप्ट का उपयोग करना' और यह jQuery है, मुझे लगता है

— अपोलो

आप मुझसे ऊपर उठते हैं, हालांकि यह jQuerry का उपयोग कर रहा है। दृष्टिकोण यह है कि मायने रखता है।

— क्रैंकुबा

Answer 4

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

Answer 5

यदि आपके पास अपने इनपुट फॉर्म से छवि फ़ाइल है। आप इस तरह का उपयोग कर सकते हैं

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

Answer 6

इसी तरह का सवाल पूछा और यहां 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");

Answer 7

JQuery के साथ छवि आकार प्राप्त करें

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

जावास्क्रिप्ट के साथ छवि आकार प्राप्त करें

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

जावास्क्रिप्ट के साथ छवि आकार प्राप्त करें (आधुनिक ब्राउज़र, 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

Answer 8

निम्नलिखित कोड पृष्ठ पर प्रत्येक छवि के लिए छवि विशेषता ऊंचाई और चौड़ाई जोड़ते हैं ।

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

Comments

प्रश्न उपयोगकर्ता को छवि दिखाए बिना छवि आयाम प्राप्त करने के बारे में था। छवि प्रदर्शित होने के बाद छवि की चौड़ाई और ऊँचाई विशेषताओं को सेट करना बिल्कुल कोई मतलब नहीं है।

— यारोस्लाव स्टावनिचि