जावास्क्रिप्ट - एचटीएमएल img src

Question

से बाइट में आकार मैं कैसे HTML/जे एस के साथ एक "img" टैग से "src" से बाइट में आकार पाने के लिए जानना चाहते हैं प्राप्त करें।

<img src="https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif"/> 

ऊपर के उदाहरण मैं मूल रूप से पता करने के लिए कितना बड़ा "testpattern.gif" (बाइट में) है चाहेगा में

।

अग्रिम धन्यवाद।

Answer 1

जावास्क्रिप्ट एक शुद्ध क्लाइंट साइड स्क्रिप्टिंग है और यदि आप मुझसे पूछें कि क्या हम केवल जावास्क्रिप्ट का उपयोग कर छवि आकार प्राप्त कर सकते हैं, तो मेरा उत्तर "नहीं" है। यहां तक ​​कि यदि आप स्थानीय रूप से फ़ाइलों को चलाते हैं, तो आप फ़ाइल का आकार प्राप्त नहीं कर पाएंगे।

XMLHttpRequest object

var obj = new XMLHttpRequest(); 
obj.open('HEAD', 'image path', true); 
obj.onreadystatechange = function(){ 
    if (obj.readyState == 4) { 
    if (obj.status == 200) { 
     alert('Size in bytes: ' + obj.getResponseHeader('Content-Length')); 
    } else { 
     alert('ERROR'); 
    } 
    } 
}; 
obj.send(null); 

यह मूलतः दृश्य से सुरक्षित सर्वर से http या https अनुरोध भेजने और प्रतिक्रिया वापस स्क्रिप्ट को लोड करने के लिए प्रयोग किया जाता है। यह आधुनिक ब्राउज़र द्वारा समर्थित है, पुराने लोगों को ActiveXObject नामक एक समान होता था। onReadyStateChange ईवेंट में इसके 5 तैयार चरण हैं।

• 0 = अनुरोध आरंभ नहीं
• 1 = सर्वर कनेक्शन
स्थापित
• 2 = अनुरोध प्राप्त हुआ
• 3 = अनुरोध संसाधित करने
• 4 = संसाधन समाप्त होने के और प्रतिक्रिया के लिए तैयार है

।

Answer 2

खैर, यह 2017 है और अब आप जावास्क्रिप्ट के भीतर एक छवि के transferSize, encodedBodySize, decodedBodySize निकालने के लिए संसाधन समय API का उपयोग कर सकते हैं:

नीचे एक पृष्ठ पर सभी imgs के लिए आकार जानकारी का उपयोग करने कोड है (सभी नीचे करने के लिए चेतावनी देखें):

var imgElems = document.getElementsByTagName('img'); 
for (var i=0, len = imgElems.length; i < len; i++) 
{ 
    var url = imgElems[i].src || imgElems[i].href; 
    if (url && url.length > 0) 
    { 
     var iTime = performance.getEntriesByName(url)[0]; 
     console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize 
    } 
} 

• सुनिश्चित करें कि आप (सुनिश्चित करें कि छवियों लोड किए गए हैं होने के लिए)
• दस्तावेज़ ऑनलोड के बाद उपरोक्त कोड को चलाने बनाओ CORS के कारण, एक अलग डोमेन से आने उपलब्ध नहीं हो सकता
• यकीन है कि संसाधन समय API रहो (जब तक अलग डोमेन के सर्वर समय-अनुमति दें-उत्पत्ति HTTP प्रतिक्रिया हेडर की स्थापना की है) ब्राउज़र के लिए उपलब्ध है छवियों के लिए समय जानकारी (रों) आप लक्ष्यीकरण कर रहे हैं: http://caniuse.com/#feat=resource-timing
• सुनिश्चित करें कि आप आप सही आकार विशेषता का उपयोग सुनिश्चित करने के लिए transferSize, encodedBodySize, decodedBodySize के बीच अंतर का अनुमान मिल सुनिश्चित करें।