क्या jquery के साथ एक छवि के "प्राकृतिकविड्थ" को पढ़ने का कोई तरीका है?

Question

मैं कुछ इस तरह से करने की कोशिश की:

var Height = $(this).naturalHeight; 

लेकिन यह काम नहीं करता। वहाँ कि

greez

Answer 1

$this.css('height', 'auto'); 
var height = $this.height(); 

Answer 2

सबसे अच्छा आप कर सकते हैं चौड़ाई और ऊंचाई की स्थापना के बिना एक छवि छिपाने के लिए और अपनी मूल छवि के रूप में इस छवि के लिए चित्र स्रोत का उपयोग करने के लिए है करने के लिए कोई रास्ता नहीं है। फिर इस छिपी हुई छवि के आयाम की गणना करें।

अन्यथा आप सर्वर पक्ष में भौतिक आयाम की गणना कर सकते हैं और पृष्ठ में एक छिपे तत्व को पास कर सकते हैं और उस छिपे हुए तत्व मान से आकार प्राप्त कर सकते हैं।

// preload the image 
var height, width = ''; 
var img = new Image(); 
var imgSrc = '/path/to/image.jpg'; 

$(img).load(function() { 
    alert('height: ' + img.height); 
    alert('width: ' + img.width); 
    // garbage collect img 
    delete img; 
}).error(function() { 
    // image couldnt be loaded 
    alert('An error occurred and your image could not be loaded. Please try again.'); 
}).attr({ src: imgSrc }); 

Answer 3

एक तरह से एक छवि के आयाम प्राप्त करने के लिए JavaScript का उपयोग करके चित्र की एक कॉपी लोड और यह आयाम है प्राप्त करने के लिए है । कभी-कभी jQuery थोड़ा बहुत उपयोगी होता है और आपको इसे अपने रास्ते से बाहर निकलने के लिए कहना होगा। यदि आप प्राकृतिकविड्थ या प्राकृतिक हाइट का उपयोग करना चाहते हैं तो बस उस ऑब्जेक्ट का उपयोग करें जो jQuery ऑब्जेक्ट को मूल ब्राउज़र तत्व संदर्भ में परिवर्तित करके पहले से मौजूद है।

var Height = document.getElementById($(this).attr("id")).naturalHeight; 

Answer 4

यह स्वीकार किया समाधान की तरह मुझे लग रहा है वस्तु की उपस्थिति को संशोधित करता है:

Answer 5

सिर्फ कोशिश करेंगे

var width = $("img", this).css('width', 'auto').width(); 
var height= $("img", this).css('height', 'auto').height(); 

मूल रूप से naturalWidth और naturalHeight के लिए गणना है वैसे भी

Answer 6

यहाँ एक jQuery समारोह जो भी बड़ी छवियों के लिए पुराने आईई संस्करण पर काम करता है की एक उदाहरण है।

/* 
* NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load. 
* @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined. 
*/ 
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) { 
    var img = this[0]; 
    var naturalWidth = img.naturalWidth; 
    if (naturalWidth) { 
     onNaturalWidthDefined(img); 
    } else { //No naturalWidth attribute in IE<9 - calculate it manually. 
     var newImg = new Image(); 
     newImg.src = img.src; 
     //Wait for image to load 
     if (newImg.complete) { 
      img.naturalWidth = newImg.width; 
      onNaturalWidthDefined(img); 
     } else { 
      $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)}); 
     } 
    } 
}; 

प्रयोग सरल है:

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)}); 

Answer 7

से HERE

स्रोत यहाँ एक छोटी jQuery (कोई भी संस्करण) प्लगइन है कि दो तरीकों कहते है: naturalWidth() और naturalHeight()। यह यह निर्धारित करने के लिए ब्रांचिंग का उपयोग करता है कि क्या प्राकृतिकविड्थ और प्राकृतिक हेइट ब्राउज़र द्वारा समर्थित हैं या नहीं। यदि समर्थित है, तो विधि प्राकृतिक विड्थ या प्राकृतिक हाइट प्रॉपर्टी के लिए एक गेटर बन जाती है। यदि समर्थित नहीं है, तो विधि एक नया अनस्टाइल छवि तत्व बनाता है और उस तत्व की वास्तविक चौड़ाई और ऊंचाई देता है।

// adds .naturalWidth() and .naturalHeight() methods to jQuery 
    // for retreaving a normalized naturalWidth and naturalHeight. 
    (function($){ 
    var 
    props = ['Width', 'Height'], 
    prop; 

    while (prop = props.pop()) { 
    (function (natural, prop) { 
     $.fn[natural] = (natural in new Image()) ? 
     function() { 
     return this[0][natural]; 
     } : 
     function() { 
     var 
     node = this[0], 
     img, 
     value; 

     if (node.tagName.toLowerCase() === 'img') { 
     img = new Image(); 
     img.src = node.src, 
     value = img[prop]; 
     } 
     return value; 
     }; 
    }('natural' + prop, prop.toLowerCase())); 
    } 
    }(jQuery)); 

    // Example usage: 
    var 
    nWidth = $('img#example').naturalWidth(), 
    nHeight = $('img#example').naturalHeight(); 

Answer 8

मैं देशी जावास्क्रिप्ट

.naturalWidth/.naturalHeight

विशेषताओं का एक jQuery वस्तु पर का उपयोग मैं

var width = $(this).get(0).naturalWidth; 
var height = $(this).get(0).naturalHeight; 

या

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight; 

का उपयोग

यदि कोई jQuery ऑब्जेक्ट नहीं चुना गया है।

With get(0) on a jQuery object you can access the associated DOM-element। मूल डीओएम तत्व पर आप मूल जावास्क्रिप्ट कोड के साथ काम कर सकते हैं (यहां नेटिव जावास्क्रिप्ट एट्रिब्यूट का उपयोग कर सकते हैं। प्राकृतिक वायरिथ)