मूल छवि आकार क्रॉस-ब्राउज़र का निर्धारण

क्लाइंट-साइड का आकार बदलने वाली छवि के मूल भौतिक आयामों को निर्धारित करना एक हो सकता है क्रॉस-ब्राउज़र चुनौती. हालाँकि, इसे प्राप्त करने के लिए विश्वसनीय और फ्रेमवर्क-स्वतंत्र तरीके हैं:

विकल्प 1: गतिशील छवि आयाम पढ़ना

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

विकल्प 2: जावास्क्रिप्ट इमेज ऑब्जेक्ट

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

कोड उदाहरण:

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert('The image size is '   width   '*'   height);
  };

  newImg.src = imgSrc; // Do this after setting `onload`
}

ध्यान दें: यदि आप बड़ी छवियों के साथ आयाम नहीं लौटाने की समस्या का सामना करते हैं, तो जावास्क्रिप्ट ऑब्जेक्ट के भीतर ऑनलोड ईवेंट का उपयोग करने पर विचार करें। यह सुनिश्चित करता है कि छवि अपने गुणों तक पहुँचने से पहले पूरी तरह से लोड हो गई है।