दिलचस्प पोस्ट
जैस्मीन में JQuery चयनकर्ताओं पर जासूसी क्या गीट की पैक स्नैपशॉट्स के बजाय डेल्टा हैं? स्टार्टअप पर टॉमकेट प्री-कंपाइल जेएसपी कैसे बना सकता हूँ? सी ++ 11 के साथ रिफैक्टरिंग गिट को बाइनरी फाइलों को मर्ज करने के लिए नहीं बल्कि चुनने के लिए कहें मैं एक मूल्य और एक ही संरचना में उस मान के संदर्भ क्यों नहीं रख सकता? कांका () सी में printf का उपयोग कर क्या मैं सिग्नलआर और एक रीसेट एपीआई दोनों को शामिल कर सकता हूं? सबसे अधिक गतिविधि की पहचानकर्ता कैसे प्राप्त करें? Microsoft.Office.Interop.Excel वास्तव में धीमा है कैसे चेक बॉक्स राज्य सहित MVC में नियंत्रक के लिए IEnumerable सूची पारित करने के लिए? मैं jquery के साथ iframe में एक यूआरएल कैसे लोड करूँ? पीडो में एकाधिक मूल्यों को बाध्य करना मैं गतिशील ऑब्जेक्ट के सदस्यों को कैसे प्रतिबिंबित करूं? मैं अपने WCF क्लाइंट ऐप में मेमोरी बर्बाद करने से BufferManager / PooledBufferManager को कैसे रोका जा सकता हूं?

जावास्क्रिप्ट के माध्यम से छवि फ़ाइल आकार + आयाम निर्धारित करना?

वेब ऐप के एक भाग के रूप में, छवियों को डाउनलोड करने और वेब पेज पर रेंडर करने के बाद, मुझे ब्राउज़र के संदर्भ में एक छवि के फ़ाइल आकार (केबी) और रिज़ॉल्यूशन निर्धारित करने की आवश्यकता होती है (इसलिए मैं उदाहरण के लिए, पृष्ठ पर जानकारी प्रदर्शित कर सकता हूं यह क्लाइंट-साइड की ज़रूरत है, जाहिर है। एक्स-ब्राउज़र को एक्टिवक्स कंट्रोल या जावा एप्लेट (आईई 7 +, एफएफ 3 +, सफ़ारी 3+, आईई 6 को अच्छा) के बिना हल करने में सक्षम होना चाहिए, हालांकि यह नहीं है प्रति ब्राउज़र एक ही समाधान हो।

आदर्श रूप से यह सिस्टम जावास्क्रिप्ट का उपयोग करके किया जाएगा, लेकिन अगर मुझे पूरी तरह से एक JQuery या इसी तरह की लाइब्रेरी (या इसका एक छोटा सा समूह) की आवश्यकता है, जो किया जा सकता है।

Solutions Collecting From Web of "जावास्क्रिप्ट के माध्यम से छवि फ़ाइल आकार + आयाम निर्धारित करना?"

संपादित करें :

सीमांत और मार्जिन को छोड़कर, एक DOM तत्व के मौजूदा इन-ब्राउज़र पिक्सेल आकार (आपके केस आईएमजी तत्वों) को प्राप्त करने के लिए, आप ग्राहक की चौड़ाई और क्लाइंट का उपयोग कर सकते हैं हाइट गुण

var img = document.getElementById('imageId'); var width = img.clientWidth; var height = img.clientHeight; 

अब फ़ाइल का आकार प्राप्त करने के लिए, अब मैं केवल फ़ाइल आकार की संपत्ति के बारे में सोच सकता हूं जो कि इंटरनेट एक्सप्लोरर दस्तावेज़ और आईएमजी तत्वों के लिए उजागर करता है …

2 संपादित करें: मेरे दिमाग में कुछ आता है …

सर्वर पर होस्ट की गई फ़ाइल का आकार प्राप्त करने के लिए, आप बस अजाक्स का उपयोग करके एक हेड एचटीटीपी अनुरोध कर सकते हैं। इस प्रकार का अनुरोध प्रतिक्रिया में किसी भी सामग्री को स्थानांतरित किए बिना अनुरोध द्वारा निर्दिष्ट यूआरएल के बारे में मेटाइनेटेशन प्राप्त करने के लिए उपयोग किया जाता है।

HTTP अनुरोध के अंत में, हमारे पास प्रतिक्रिया -लंबाई हेडर्स तक पहुंच है, जिसमें सामग्री-लंबाई शामिल है जो फ़ाइल के आकार को बाइट में दर्शाती है।

कच्चे XHR का उपयोग करते हुए एक बुनियादी उदाहरण:

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

नोट: ध्यान रखें कि जब आप अजाक्स अनुरोध करते हैं, तो आप उसी मूल नीति द्वारा प्रतिबंधित होते हैं, जिससे आप केवल उसी डोमेन के भीतर ही अनुरोध कर सकते हैं।

अवधारणा का एक कार्यप्रदर्शन यहां देखें ।

3 संपादित करें:

1.) सामग्री-लंबाई के बारे में, मुझे लगता है कि उदाहरण के लिए यदि कोई आकार बेमेल हो सकता है, तो सर्वर प्रतिक्रिया जप कर दी जाती है, तो आप यह देखने के लिए कुछ परीक्षण कर सकते हैं कि यह आपके सर्वर पर हुआ है या नहीं।

2.) एक छवि के मूल आयाम प्राप्त करने के लिए, आप एक आईएमजी तत्व प्रोग्राम बना सकते हैं, उदाहरण के लिए:

 var img = document.createElement('img'); img.onload = function () { alert(img.width + ' x ' + img.height); }; img.src='http://sstatic.net/so/img/logo.png'; 

जावास्क्रिप्ट का उपयोग करते हुए अपलोड की गई छवि आकार की जांच करें

 <script type="text/javascript"> function check(){ var imgpath=document.getElementById('imgfile'); if (!imgpath.value==""){ var img=imgpath.files[0].size; var imgsize=img/1024; alert(imgsize); } } </script> 

HTML कोड

 <form method="post" enctype="multipart/form-data" onsubmit="return check();"> <input type="file" name="imgfile" id="imgfile"><br><input type="submit"> </form> 

सेवा श्रमिकों को Content-Length शीर्षलेख सहित शीर्ष लेख सूचनाओं तक पहुंच है

सेवा श्रमिकों को समझने में थोड़ा जटिल है, इसलिए मैंने स्व-मिल-हेडर नामक एक छोटी लाइब्रेरी बनाई है।

आपको चाहिए:

  1. पुस्तकालय की response घटना की सदस्यता लें
  2. सभी नेटवर्क अनुरोधों के बीच छवि के url की पहचान करें
  3. यहां आप जा सकते हैं, आप Content-Length शीर्षलेख पढ़ सकते हैं!

नोट करें कि आपकी वेबसाइट सेवा श्रमिकों का उपयोग करने के लिए HTTPS पर होने की आवश्यकता है, ब्राउज़र को सेवा श्रमिकों के साथ संगत होना चाहिए और छवियां आपके पृष्ठ के समान ही होने चाहिए।

आप getElement(...).width और ...height का उपयोग कर आयाम प्राप्त कर सकते हैं।

चूंकि जावास्क्रिप्ट सुरक्षा कारणों से स्थानीय डिस्क पर कुछ भी नहीं पहुंच सकता है, इसलिए आप स्थानीय फाइलों की जांच नहीं कर सकते। ब्राउज़र की कैश में फ़ाइलों के लिए यह भी सच है।

आपको वास्तव में एक सर्वर की आवश्यकता है जो AJAX अनुरोधों को संसाधित कर सकते हैं। उस सर्वर पर, एक ऐसी सेवा स्थापित करें जो छवि को डाउनलोड करती है और डमी आउटपुट में डेटा स्ट्रीम सहेजती है जो कि बाइट्स को गिना जाता है। ध्यान दें कि आप हमेशा सामग्री-लंबाई शीर्ष लेख फ़ील्ड पर भरोसा नहीं कर सकते क्योंकि छवि डेटा एन्कोड किया जा सकता है। अन्यथा, एक HTTP हेड अनुरोध भेजने के लिए पर्याप्त होगा

इस बारे में कैसा है:

 var imageUrl = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'; var blob = null; var xhr = new XMLHttpRequest(); xhr.open('GET', imageUrl, true); xhr.responseType = 'blob'; xhr.onload = function() { blob = xhr.response; console.log(blob, blob.size); } xhr.send(); 

http://qnimate.com/javascript-create-file-object-from-url/

उसी उत्पत्ति नीति के कारण, केवल उसी मूल के तहत काम करते हैं

आप इस तरह से कुछ का उपयोग कर पृष्ठ पर एक छवि का आयाम पा सकते हैं

 document.getElementById('someImage').width 

फ़ाइल आकार, हालांकि, आपको कुछ सर्वर-साइड का उपयोग करना होगा

अधिकांश लोगों ने जवाब दिया है कि डाउनलोड की गई छवि के आयामों को कैसे जाना जा सकता है, इसलिए मैं सिर्फ सवाल के दूसरे हिस्से का जवाब देने की कोशिश करूँगा – डाउनलोड की छवि फ़ाइल-आकार जानने का।

आप यह संसाधन समय एपीआई का उपयोग कर सकते हैं। बहुत विशेष रूप से एसईओआईपी, एन्कोडेडबोडी साइज़ और डीकोड किए गए बॉडी साइज़ गुणों को इस उद्देश्य के लिए इस्तेमाल किया जा सकता है।

यदि आप चाहते हैं तो कोड स्निपेट और अधिक जानकारी के लिए यहां मेरा उत्तर देखें: जावास्क्रिप्ट – एचटीएमएल आईएमजी एसआरसी से बाइट्स में आकार प्राप्त करें

छवि के मूल आयाम प्राप्त करना

यदि आपको मूल छवि आयाम प्राप्त करने की आवश्यकता है (ब्राउज़र संदर्भ में नहीं)। इस कारण से, क्लाइंट वाइड और क्लाइंट हाइट गुण काम नहीं कर रहा है क्योंकि यह सीएसएस के माध्यम से चित्र बढ़ता / सिकुड़ता है , क्योंकि यह गलत मान देता है।

मूल आयाम प्राप्त करने के लिए, प्राकृतिकहैइट और प्राकृतिक वाइड गुणों का उपयोग करें।

 var img = document.getElementById('imageId'); var width = img.naturalWidth; var height = img.naturalHeight; 

ps यह मूल प्रश्न का उत्तर नहीं देता जैसा कि स्वीकार किए जाते हैं उत्तर नौकरी करता है यह, इसके बजाय, इसके अतिरिक्त कार्य करता है।

 var img = new Image(); img.src = sYourFilePath; var iSize = img.fileSize; 

केवल एक चीज जो आप कर सकते हैं वह एक सर्वर पर छवि अपलोड करना है और सी # जैसी कुछ सर्वर साइड भाषा का उपयोग करके छवि का आकार और आयाम जांचना है।

संपादित करें:

आपकी आवश्यकता केवल जावास्क्रिप्ट का उपयोग करके नहीं की जा सकती