सभी ब्राउज़रों में क्लाइंट-साइड आकार बदलने वाली छवियों के मूल आयामों का अनावरण

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

विकल्प 1: ऑफसेटविड्थ और ऑफसेटहाइट को उजागर करना

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

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

विकल्प 2: जावास्क्रिप्ट छवि ऑब्जेक्ट का उपयोग करना

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

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler

ईवेंट हैंडलिंग के महत्व को स्वीकार करना याद रखें। बड़ी छवियों के साथ, ऑनलोड ईवेंट के बिना विकल्प 2 में दृष्टिकोण का उपयोग करने से परिणाम खाली हो सकते हैं क्योंकि कोड निष्पादन चलने पर छवि अभी तक लोड नहीं हुई होगी।

इन ब्राउज़र-अज्ञेयवादी तकनीकों को नियोजित करके, आप आत्मविश्वास से कर सकते हैं बढ़ी हुई परिशुद्धता और लचीलेपन के साथ अपने वेब अनुप्रयोगों को सशक्त बनाते हुए, संशोधित छवियों के वास्तविक आयाम निर्धारित करें।