जावास्क्रिप्ट

Question

में लोड की गई छवि की चौड़ाई प्राप्त करें मैं अपने जावास्क्रिप्ट कोड में एक छवि जोड़ रहा हूं लेकिन इसकी सही चौड़ाई और ऊंचाई प्राप्त करना चाहता हूं। क्या यह संभव है? मेरे कोड इस तरह दिखता है:

$('body').append('<img src="path.jpg" width="' 
     + w + '" height="' + h + '" alt="" />'); 

---

मुझे पता है कि छवि चौड़ाई प्राप्त करने के बाद इसे लोड किया गया है, लेकिन मैं एक img लोड हो रहा हूँ और सीधे उसके संगत चौड़ाई और ऊंचाई प्राप्त करना चाहते हैं। कोई सुझाव?

Answer 1

एचटीएमएल कल्पना एक दृश्य एजेंट के लिए एक संकेत है, जो घोला जा सकता है मार्कअप के रूप में <img> के लिए height और width निर्दिष्ट करने के लिए सिफारिश की गई है और एक HTML दस्तावेज़ का दृश्य प्रतिनिधित्व बनाने के लिए स्टाइल नियम। सीएसएस बॉक्स मॉडल में, छवि आयाम आंतरिक हैं, यानी वे बाइनरी ब्लॉब में निहित हैं। इसका अर्थ यह है कि किसी ब्राउज़र को यह तय करने से पहले एक HTTP प्रतिक्रिया का इंतजार करना पड़ता है कि छवि कितनी बड़ी है और इस प्रकार भाई बहनों और माता-पिता को कैसे रखा जाए और कैसे रखा जाए। HTML पृष्ठों में आयाम निर्दिष्ट करने से ब्राउज़र को पृष्ठ को त्वरित रूप से प्रस्तुत करने में सहायता मिलती है, क्योंकि यह सर्वर से छवि डाउनलोड करने से पहले चौड़ाई और ऊंचाई असाइन कर सकता है।

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

तो ब्राउजर को संकेत देने का एकमात्र विकल्प सर्वर की तरफ छवि को माप रहा है। यह एक प्रति-अनुरोध के आधार पर किया जा सकता है (लेकिन यह संसाधनों का अपशिष्ट है), या यह तब किया जा सकता है जब छवि पहली बार अपलोड की जाती है (और फिर डेटाबेस से पुनर्प्राप्त), या अंततः इसे निरंतर माना जा सकता है, उदाहरण के लिए अगर यह एक प्रोफ़ाइल तस्वीर है कि आपकी सेवा हमेशा W x H पिक्सेल बड़ी हो जाएगी (यह कॉन्फ़िगरेशन पैरामीटर हो सकता है)।

Answer 2

आप इसे लोड करने के बाद छवि के आकार प्राप्त कर सकते हैं:

var imageWidth; 
var imageHeight; 
$('<img>').on('load', function(){ 
    imageWidth = this.width; 
    imageHeight = this.height; 
    $('body').append($(this)); 
}).attr('src', imageUrl); 

Answer 3

var image = new Image; 
image.src = $('img').prop('src'); 
alert($(image).prop('height')) 

Answer 4

आप इसे तुरंत प्रदर्शित करने के बिना समय से पहले छवि लोड कर सकते हैं।

var img = document.createElement('img'); 
img.src = 'your_image.jpg'; 
var imgHeight = img.height, 
    imgWidth = img.width; 

अब जब भी आपको आवश्यकता हो, आप इसे सही विवरण के साथ कॉल कर सकते हैं।

Answer 5

मैं वर्डप्रेस कि छवि आयाम आउटपुट में एक नया कार्य बनाने के लिए तो मैं प्राप्त कर सकते हैं वर्डप्रेस

function wpsc_the_product_dimensions($width='', $height='', $product_id='') { 
    if (empty($product_id)) 
     $product_id = get_the_ID(); 


    $product = get_post($product_id); 

    if ($product->post_parent > 0) 
     $product_id = $product->post_parent; 

    $attached_images = (array)get_posts(array(
       'post_type' => 'attachment', 
       'numberposts' => 1, 
       'post_status' => null, 
       'post_parent' => $product_id, 
       'orderby' => 'menu_order', 
       'order' => 'ASC' 
      )); 


    $post_thumbnail_id = get_post_thumbnail_id($product_id); 

    $image_attributes = wp_get_attachment_image_src($post_thumbnail_id, 'large'); 

    $image_dimensions = 'product-link="'.$image_attributes[0].'" product-width="'.$image_attributes[1].'" product-height="'.$image_attributes[2].'"'; 

    return $image_dimensions; 
} 

के साथ करता है और img को image_dimensions देते फैसला किया और पुनः प्राप्त जावास्क्रिप्ट के साथ करता है

w = $(this).attr('product-width'); 
h = $(this).attr('product-height');