जावास्क्रिप्ट के साथ एक छवि की वास्तविक चौड़ाई और ऊंचाई प्राप्त करें? (सफारी / क्रोम में)

278

मैं एक jQuery प्लगइन बना रहा हूँ।

मैं सफारी में जावास्क्रिप्ट के साथ वास्तविक छवि की चौड़ाई और ऊंचाई कैसे प्राप्त करूं?

निम्नलिखित फ़ायरफ़ॉक्स 3, IE7 और ओपेरा 9 के साथ काम करता है:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

लेकिन वेबकिट ब्राउज़र में जैसे सफारी और Google क्रोम मान 0 हैं।

javascript  jquery  safari  google-chrome  webkit 
— फ्रैंक बैनिस्टर
स्रोत
4
स्वीकृत उत्तर छवि भार घटना का उपयोग करता है। एकदम सही समझ में आता है, लेकिन उन स्थितियों में एक अविश्वसनीय समाधान बन जाता है जहां छवियों को कैच किया जा सकता है (मेरे निराशा के लिए)।
— नोसरेडना
इस पर मेरा लेना आपकी मदद कर सकता है, नवीनतम वेबकिट में परीक्षण किया गया। stackoverflow.com/questions/318630/…
— xmarcos
5
@ नोसेरेडना, आप इमेजस्लेबेड फ़ंक्शन में दिलचस्पी ले सकते हैं जो कि छवियों को कैश होने पर भी आग देगा।
— बेजोनबी
7
इस प्रश्न का सही उत्तर केवल प्राकृतिक तरीके और प्राकृतिक गुणों का उपयोग करना है। किसी हैकरी की आवश्यकता नहीं है।
— डेविड जॉनस्टोन
आप यह भी तैयार कर सकते हैं कि आप दस्तावेज़ के बजाय विंडो लोड पर क्या कर रहे हैं
— user1380540

जवाबों:

356

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

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

किसी भी प्रभाव से बचने के लिए CSS में छवि के आयाम हो सकते हैं, ऊपर दिया गया कोड छवि की मेमोरी कॉपी बनाता है। यह FDisk द्वारा सुझाया गया एक बहुत ही चतुर समाधान है ।

आप naturalHeightऔर naturalWidthएचटीएमएल 5 विशेषताओं का उपयोग भी कर सकते हैं ।

— जावी
स्रोत
5
यह चतुर है, पता नहीं था कि आप $ (img) .load () कर सकते हैं;
— सीनजा
3
के अलावा widthऔर heightआप शायद भी निकाल देना चाहिए min-width, min-height, max-widthऔर max-heightके रूप में वे भी छवि आयाम को प्रभावित कर सकता।
— मकचन
5
FDisk का समाधान एक बहुत ही चतुर है। दुर्भाग्य से समाधान के रूप में उन्होंने लिखा है कि यह केवल तभी काम करेगा जब छवि को कैश किया गया हो या यदि पृष्ठ पहले ही डाउनलोड करना समाप्त कर चुका हो। यदि छवि कैश नहीं है या यदि यह कोड पहले कहा जाता है window.onload, तो 0 की ऊँचाई / चौड़ाई वापस आ सकती है। किसी भी स्थिति में, मैंने FDisk के विचार को उपरोक्त समाधान में एकीकृत किया है।
— ज़वी
5
जब मैं सांत्वना की कोशिश करता हूं। (pic_real_height) मैं हर बार अपरिभाषित हो जाता हूं। क्रोम, एफएफ, IE9।
— हेलगेटहाइकिंग 20
10
आपके पास यहां जो समस्या है वह load()यह है कि इसे अतुल्यकालिक रूप से निष्पादित किया जाएगा ताकि यदि आप पहुंचना चाहते हैं widthऔर height- वे अभी तक सेट नहीं किए गए हैं। इसके बजाय अपने आप में "जादू" load()करो!
— डेग्रीविस
286

HTML5 से naturalHeightऔर naturalWidthविशेषताओं का उपयोग करें ।

उदाहरण के लिए:

var h = document.querySelector('img').naturalHeight;

IE9 +, क्रोम, फ़ायरफ़ॉक्स, सफारी और ओपेरा ( आँकड़े ) में काम करता है।

— Sandstrom
स्रोत
3
@DavidJohnstone उनका उपयोग किया जा रहा एक उदाहरण मदद कर सकता है। लेकिन मैं सहमत हूं, निश्चित रूप से उच्चतर होने के योग्य है।
— स्टीफन
5
यह फ़ायरफ़ॉक्स के नवीनतम संस्करण (30.0) में तब तक काम नहीं करता है जब तक कि छवि पहले से ही कैश में मौजूद न हो।
— जोएल किंजल
1
मैं डेविड जॉनस्टोन से सहमत हूं। यह अच्छी खबर है।
— 20 अक्टूबर को jchwebdev
ध्यान दें कि आपको अभी भी छवि को लोड करने के लिए प्रतीक्षा करने की आवश्यकता है
— जेसुअ कैर्रा
नहीं, ClientHeight / clientWidth स्पष्ट रूप से वह नहीं करता है जो सवाल पूछता है। इसे छवि की ऊँचाई और चौड़ाई लौटाने की आवश्यकता है, न कि छवि की ऊँचाई और चौड़ाई जैसा कि यह पृष्ठ पर दिखता है। naturalWidth और naturalHeight सही हैं।
— जेरेन वैन डेन ब्रोक
61 


function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

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

— fdisk
स्रोत
3
कुछ महीनों के बाद, jquery (नवीनतम क्रोम का उपयोग करके) के साथ एक छवि को क्लोन करना और इसे गुण प्राप्त करना, हमेशा 0x0 देता है अब तक यह एकमात्र समाधान है जो काम करता है (इस पृष्ठ में अन्य सभी का परीक्षण किया है) लौटने से पहले, मैंने t = सेट किया अशक्त भी।
— ओमिडिओ
1
FDIS jQuery के साथ छवि को क्लोन करने का सुझाव नहीं दे रहा है। वह एक नई Imageवस्तु बनाने का सुझाव दे रहा है , फिर उसकी widthसंपत्ति को देख रहा है। यह एक सरल, सुरुचिपूर्ण दृष्टिकोण है। FDisk, आपके पास मेरा वोट है। :)
— davidchambers
3
सीएसएस मुद्दों से बचने के लिए यह एक बहुत ही चतुर तरीका है। दुर्भाग्य से, जैसा कि ऊपर लिखा गया समाधान केवल तभी काम करेगा जब छवि कैश की गई हो या पहले से डाउनलोड करना समाप्त कर चुका हो। यदि छवि कैश नहीं है या यदि यह कोड पहले कहा जाता है window.onload, तो 0 की चौड़ाई वापस आ सकती है।
— Xavi
1
मैं छवि गैलरी में मोबाइल फोन के लिए एक वेबसाइट में इस दृष्टिकोण का उपयोग कर रहा हूं। बड़ी छवियां तब रिज़ॉल्यूशन को css में 100% और मूल आयामों में छोटी के साथ प्रदर्शित किया जाता है।
— FDisk
1
जैसा कि ज़ावी ने उल्लेख किया है, यह IE8 में विफल रहता है और कभी-कभी छवि कैशिंग पर निर्भर करता है। इसलिए मैंने इसे इस दृष्टिकोण के साथ युग्मित किया, और यह सही काम करता है: पहले लोड इवेंट को बांधें, फिर छवि ऑब्जेक्ट को इसके स्रोत stackoverflow.com/questions/4921712/…
— केविन सी।
16

मूल समस्या यह है कि WebKit ब्राउज़र (सफारी और क्रोम) जावास्क्रिप्ट और सीएसएस जानकारी को समानांतर में लोड करते हैं। इस प्रकार, गलत उत्तर को वापस करते हुए, सीएसएस के स्टाइलिंग प्रभाव की गणना करने से पहले जावास्क्रिप्ट निष्पादित हो सकता है। JQuery में, मैंने पाया है कि समाधान का दस्तावेज़ तक इंतजार करना है। पहले से ही == 'पूर्ण', .eg

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function)

जहाँ तक चौड़ाई और ऊँचाई जाती है ... आप जो कर रहे हैं उसके आधार पर आप ऑफसेटविंड और ऑफसेटहाइट चाहते हैं, जिसमें बॉर्डर और पैडिंग जैसी चीजें शामिल हैं।

— Cugel
स्रोत
हाँ, यही कारण है। एक बेहतर समाधान jQuery के लोड-इवेंट का उपयोग करना है।
— फ्रैंक बैनिस्टर
6
$(window).load(function(){ ... });मेरे मामले में मदद की
— kollpto
16

किसी समस्या के बारे में स्वीकृत उत्तर में बहुत अधिक चर्चा होती है, जहां वेब onloadफायर कैश से एक छवि लोड होने पर घटना में आग नहीं लगती है।

मेरे मामले में, onloadकैश्ड छवियों के लिए आग, लेकिन ऊँचाई और चौड़ाई अभी भी 0. है। एक साधारण setTimeoutने मेरे लिए इस मुद्दे को हल किया:

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

मैं यह नहीं कह सकता onloadकि जब कैश से छवि लोड हो रही है तब भी घटना क्यों फायर हो रही है (jQuery 1.4 / 1.5 का सुधार?) - लेकिन अगर आप अभी भी इस समस्या का सामना कर रहे हैं, तो शायद मेरे जवाब और var src = img.src; img.src = ""; img.src = src;तकनीक का एक संयोजन होगा काम।

(ध्यान दें कि मेरे उद्देश्यों के लिए, मैं पूर्व-परिभाषित आयामों के बारे में चिंतित नहीं हूं, या तो छवि की विशेषताओं या CSS शैलियों में - लेकिन आप Xavi के उत्तर के अनुसार, या छवि को क्लोन करना चाहते हैं।

— JKS
स्रोत
मैं IE7 और IE8 के साथ यह बहुत समस्या थी। setTimeout () ने मेरे लिए उन ब्राउज़रों के लिए काम किया। धन्यवाद!
— वसील तोमियागा
11

यह मेरे (सफारी 3.2) के लिए काम करता है, window.onloadघटना के भीतर से फायरिंग द्वारा :

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});
— ओवेन
स्रोत
हाँ! $ (दस्तावेज़) से काम नहीं किया। पहले से ही (फ़ंक्शन () {}); धन्यवाद! इसे पढ़ने से पहले छवि को पूरी तरह से लोड करने की आवश्यकता है। बेशक।
— फ्रैंक बैनिस्टर
8

आप प्रोग्राम को छवि प्राप्त कर सकते हैं और जावास्क्रिप्ट का उपयोग करके आयामों की जांच कर सकते हैं बिना डोम के साथ गड़बड़ किए बिना।

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
— Yëco
स्रोत
2
यह सबसे अच्छा उपाय है! यह तब भी काम करता है जब छवि प्री-लोडेड या कैश्ड न हो।
— मार्बल
6

क्या बारे में image.naturalHeightऔर image.naturalWidthगुण?

क्रोम, सफारी और फ़ायरफ़ॉक्स में कुछ संस्करणों में ठीक काम करने लगता है, लेकिन IE8 या IE9 में बिल्कुल नहीं।

— एंड्रयू मैकेंजी
स्रोत
यह मेरे मामले में काम नहीं कर रहा है। बदले में मुझे NaN दे रहा है
— saadk
5

हम वास्तविक वास्तविक आयामों को बिना पलक झपकाए वास्तविक छवि कैसे प्राप्त कर सकते हैं:

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

यह <img class = "toreaddimensions" के साथ काम करता है ...

— लोमड़ी
स्रोत
5

Jquery में दो गुण होते हैं जिन्हें naturalWidth और naturalHeight कहा जाता है, आप इस तरह से उपयोग कर सकते हैं।

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

जहाँ my-img एक वर्ग नाम है जिसका उपयोग मेरी छवि का चयन करने के लिए किया जाता है।

— सैमुअल सैंटोस
स्रोत
2
ये jQuery के तरीके नहीं हैं। naturalWidth(और ऊंचाई) छवि तत्व ऑब्जेक्ट पर गुण हैं। developer.mozilla.org/en/docs/Web/API/HTMLImageElement
— सैंडस्ट्रॉम
3

जैसा कि पहले कहा गया है, यदि चित्र कैश में हैं तो Xavi उत्तर काम नहीं करेगा। यह मुद्दा वेबकीट पर प्रतिक्रिया देता है कि कैश्ड चित्रों पर लोड ईवेंट को फायर नहीं किया जा रहा है, इसलिए यदि img टैग में चौड़ाई / ऊँचाई के अटेचरों को स्पष्ट रूप से सेट नहीं किया गया है, तो छवियों को प्राप्त करने का एकमात्र विश्वसनीय तरीका ईवेंट के फ़ायर होने का इंतज़ार करना है window.load।

window.loadईवेंट सक्रिय करेगा हमेशा , तो यह किसी भी चाल के बिना उस के बाद की चौड़ाई / ऊंचाई और img उपयोग करने के लिए सुरक्षित है।

$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});

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

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});

ps: यदि आपके पास पहले से एक QueryString है img.src, तो आपको इसे पार्स करना होगा और कैश को खाली करने के लिए अतिरिक्त पैराम जोड़ना होगा।

— xmarcos
स्रोत
1
कोड का पहला ब्लॉक केवल लोड किए गए DOM में एक तत्व के आयामों को प्राप्त करता है, न कि एक छवि के ही ...
— BasTaller
1
यह वास्तव में सबसे तेज़ और सबसे प्रभावी समाधान है। कोई प्लगइन नहीं, कोई चाल नहीं! मैं एक समान उत्तर पोस्ट करने जा रहा हूं लेकिन आपका पाया गया।
— vantrung -cuncon
2

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

ल्यूक स्मिथ का समाधान यहाँ है।

और एक दिलचस्प चर्चा है कि इस गड़बड़ को jQuery 1.4 में कैसे संभाला जा सकता है।

मैंने पाया है कि यह 0 पर चौड़ाई सेट करने के लिए बहुत विश्वसनीय है, फिर "पूर्ण" संपत्ति के सही होने की प्रतीक्षा करें और चौड़ाई संपत्ति शून्य से अधिक आने के लिए। आपको त्रुटियों के लिए भी देखना चाहिए।

— Nosredna
स्रोत
जवाब में दूसरा लिंक मर चुका है।
— पेंग
2

मेरी स्थिति शायद थोड़ी अलग है। मैं गतिशील रूप से जावास्क्रिप्ट के माध्यम से एक छवि के src को बदल रहा हूं और यह सुनिश्चित करने के लिए आवश्यक है कि एक निश्चित कंटेनर (एक फोटो गैलरी में) फिट करने के लिए नई छवि आनुपातिक रूप से आकार में है। मैंने शुरू में छवि की चौड़ाई और ऊंचाई विशेषताओं को लोड करने के बाद हटा दिया (छवि के लोड इवेंट के माध्यम से) और पसंदीदा आयामों की गणना के बाद इन्हें रीसेट करें। हालाँकि, यह सफारी और संभवतः IE में काम नहीं करता है (मैंने इसे IE में पूरी तरह से परीक्षण नहीं किया है, लेकिन छवि भी नहीं दिखाती है, इसलिए ...)।

वैसे भी, सफारी पिछली छवि के आयामों को बनाए रखता है इसलिए आयाम हमेशा एक छवि के पीछे होते हैं। मुझे लगता है कि यह कैश के साथ कुछ करना है। तो सबसे सरल उपाय यह है कि आप केवल छवि को क्लोन करें और इसे DOM में जोड़ें (यह महत्वपूर्ण है कि इसे DOM के साथ जोड़ा जाए और ऊंचाई प्राप्त हो)। छवि को छिपे हुए का एक दृश्यता मान दें (प्रदर्शन का उपयोग न करें क्योंकि यह काम नहीं करेगा)। आपके द्वारा आयाम प्राप्त करने के बाद क्लोन को हटा दें।

यहाँ jQuery का उपयोग करके मेरा कोड है:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);

यह समाधान किसी भी मामले में काम करता है।

— डुआने कोमूको
स्रोत
1

हाल ही में मुझे ग्राफ़ का प्रतिनिधित्व करने वाले .dialog के डिफ़ॉल्ट आकार की स्थापना के लिए चौड़ाई और ऊँचाई खोजने की आवश्यकता थी। समाधान मैं उपयोग किया गया था:

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

मेरे लिए यह एफएफ 3, ओपेरा 10, आईई 8,7,6 में काम करता है

PS आप कुछ प्लगइन्स के अंदर देख रहे कुछ और समाधान पा सकते हैं जैसे लाइटबॉक्स या कलरबॉक्स

— SDemonUA
स्रोत
1

ज़ावी के जवाब में जोड़ने के लिए, पॉल आयरिश के गितुब डेविड डेसेंड्रो के गिटगूब एक फ़ंक्शन प्रदान करता है, जिसे imagesLoaded () कहा जाता है जो समान सिद्धांतों पर काम करता है, और कुछ ब्राउज़र की कैश्ड छवियों की समस्या को हल करता है। लोड नहीं हो रहा है। () घटना (चतुर original_src -> के साथ)। data_uri -> original_src स्विचिंग)।

यह व्यापक रूप से उपयोग किया जाता है और नियमित रूप से अपडेट किया जाता है, जो इसे समस्या का सबसे मजबूत समाधान होने में योगदान देता है, आईएमओ।

— RobW
स्रोत
1
आप imagesLoadedयहाँ फंक्शन का अपडेटेड संस्करण पा सकते हैं : github.com/desandro/imagesloaded
— bejonbee
हां, डेविड डेसेंड्रो इस समारोह की मेजबानी कर रहे हैं। मुझे @somethingkindawierd याद दिलाने के लिए धन्यवाद, मेरे उत्तर को अपडेट किया।
— रॉब
1

यह कैश्ड और गतिशील रूप से भरी हुई छवियों दोनों के लिए काम करता है।

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

इस स्क्रिप्ट का उपयोग करने के लिए:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

डेमो: http://jsfiddle.net/9543z/2/

— CheeseSucker
स्रोत
1

मैंने कुछ वर्कअराउंड उपयोगिता फ़ंक्शन किया है, imagesLaded jquery प्लगइन का उपयोग करके: https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

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

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
— Zden Zk Mlčoch
स्रोत
1

यदि छवि पहले से ही उपयोग में है, तो आप शोलुद:

  1. आरंभिक छवि सेट करें

    image.css ('चौड़ाई', 'प्रारंभिक'); image.css ('ऊंचाई', 'प्रारंभिक');

  2. आयाम प्राप्त करें

    var originalWidth = $ (यह) .width (); var originalHeight = $ (यह) .height ();

— सेबस्टियन रोजस
स्रोत
1

आप HTML इमेज एलिमेंट के naturalWidth और naturalHeight गुणों का उपयोग कर सकते हैं। (यहाँ अधिक जानकारी है )।

आप इसे इस तरह उपयोग करेंगे:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

ऐसा लगता है कि यह संस्करण 8 और नीचे से IE को छोड़कर सभी ब्राउज़रों में काम करता है।

— जय रीना
स्रोत
हाँ, कोई और IE8: D
— जायर रीना
0

मैंने डियो के उत्तर की जाँच की और यह मेरे लिए बहुत अच्छा काम करता है।

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

सुनिश्चित करें कि आप अपने सभी कार्यों को एसो कहते हैं। fadeIn () के रिकॉलर फ़ंक्शन में छवि आकार के साथ संभाल।

इसके लिए धन्यवाद।

— drublic
स्रोत
0

मैं अलग दृष्टिकोण का उपयोग करता हूं, बस छवि आकार प्राप्त करने के लिए छवि आकार प्राप्त करने के लिए सर्वर पर अजाक्स कॉल करें।

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

और बेशक सर्वर साइड कोड:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>
— damijanc
स्रोत
1
यह एक महान समाधान नहीं है और AJAX लोडिंग के किसी भी अन्य समाधान के साथ अधिक समय लगेगा।
— अर्धसत्य.मौर २our
0

यह क्रॉस ब्राउजर का काम करता है

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];

उपयोग करके आयाम प्राप्त करें 

$(this).data('dimensions').width;
$(this).data('dimensions').height;

चीयर्स!

— foxybagga
स्रोत
0 
$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        });

// यह कोड 200 * 274 डिमोशन के साथ छवि दिखाने में मदद करता है

— Eranda
स्रोत
0

यहां एक क्रॉस ब्राउज़र समाधान है जो एक घटना को ट्रिगर करता है जब आपके चयनित चित्र लोड किए जाते हैं: http://desandro.github.io/imagesloaded/ आप imagesLoaded () फ़ंक्शन के भीतर ऊंचाई और चौड़ाई देख सकते हैं।

— पॉल मेसन
स्रोत
0

अपने ही सवाल का जवाब खोजने की कोशिश कर रहे इस धागे पर ठोकर खाई। मैं लोडर के बाद एक फ़ंक्शन में एक छवि की चौड़ाई / ऊँचाई प्राप्त करने की कोशिश कर रहा था, और 0 के साथ आ रहा था। मुझे लगता है कि यह वही हो सकता है जो आप के लिए देख रहे हैं, हालांकि, यह मेरे लिए काम करता है:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}
— स्टीफन सिनोव्स्की
स्रोत
0

जीथब में इस भंडार की जाँच करें!

जावास्क्रिप्ट का उपयोग करके चौड़ाई और ऊँचाई की जांच करने के लिए बढ़िया उदाहरण

https://github.com/AzizAK/ImageRealSize

--- कुछ टिप्पणियों से अनुरोध किया जाता है ..

जावास्क्रिप्ट कोड: 

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

और HTML कोड:

<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>
— अब्दुलअज़ीज़ अलखराशी
स्रोत
यदि संभव हो तो आप यहां कोड की कुछ पंक्ति भी जोड़ सकते हैं। जैसे-जैसे लिंक
— टि्वम
-1

उन कार्यों के लिए जहां आप मूल प्लेसमेंट या छवि को बदलना नहीं चाहते हैं।

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
— डेविन
स्रोत
1
यह बिल्कुल काम नहीं करता है। यह दोनों के लिए अपरिभाषित लौट आएगा
— क्रिस सिनेली
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.