छवि पार ब्राउज़र का मूल आकार निर्धारित करें?

Question

क्या <img src='xyz.jpg'>ग्राहक पक्ष में आकार परिवर्तन के भौतिक आयामों का निर्धारण करने का एक विश्वसनीय, स्वतंत्र तरीका है ?

Comments

img.onload = function () {console.log(img.height, img.width)}

— neaumusic

Answer 1

आपके पास 2 विकल्प हैं:

विकल्प 1:

निकालें widthऔर heightविशेषताएँ और पढ़ें offsetWidthऔर पढ़ेंoffsetHeight

विकल्प 2:

एक जावास्क्रिप्ट Imageऑब्जेक्ट बनाएं , सेट करें srcऔर पढ़ें ( widthऔर heightआपको ऐसा करने के लिए पेज पर जोड़ना भी नहीं है)।

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; // this must be done AFTER setting onload
}

Pekka द्वारा संपादित करें : जैसा कि टिप्पणियों में सहमत है, मैंने छवि के ekonload´ घटना पर चलने के लिए फ़ंक्शन को बदल दिया। अन्यथा, बड़ी छवियों के साथ, heightऔर widthकुछ भी वापस नहीं करेगा क्योंकि छवि अभी तक लोड नहीं हुई थी।

Comments

यह उन चित्रों के साथ काम नहीं करेगा जो अभी तक लोड नहीं किए गए हैं। यह इस जवाब में ठोकर खाने वाले अन्य लोगों के लिए ठीक से काम करने के लिए इसे समायोजित करने के लायक हो सकता है।

— जेम्स

@ गैब्रिएल, मैं इसका उपयोग कर रहा हूं, लेकिन newImg.onloadयह सुनिश्चित करने के लिए एक फ़ंक्शन के साथ कि जब मैं चौड़ाई / ऊंचाई सेट करता हूं तो छवि लोड हो जाती है। क्या आप अपने अनुसार अपना उत्तर संपादित कर रहे हैं?

— पेकाका

बस एक साइड नोट: क्रोम / OSX को कैश्ड चित्रों के साथ समस्या हो सकती है, जहाँ आपको इस तकनीक का उपयोग करके 0 / ऊँचाई पर चौड़ाई मिलती है।

— डेविड हेल्सिंग

मैं कितना जल्दबाज़ी और चौड़ाई प्राप्त करूँगा ... ?? चूँकि वे चर राशियों के बाहर नहीं हो रहे हैं

— जैक

@GabrielMcAdams, यदि आप if(newImg.complete || newImg.readyState === 4) newImg.onload();अपने फ़ंक्शन के अंत में जोड़ते हैं, तो यह Chrome / OSX पर समस्या को ठीक कर देगा, जिससे छवियाँ लोड होने पर कैश ऑन फायर न हो।

— प्रेस्टाटुल

Answer 2

छवियाँ (कम से कम फ़ायरफ़ॉक्स पर) एक naturalWidth/ ऊँचाई की संपत्ति है, ताकि आप img.naturalWidthमूल चौड़ाई प्राप्त करने के लिए उपयोग कर सकें

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

स्रोत

Comments

Chrome पर भी काम करता है

— bcoughlan

यह विषय 2013 में अभी भी प्रासंगिक है। यहाँ IE7 / 8 के लिए एक महान समाधान के साथ एक लिंक दिया गया है: jacklmoore.com/notes/natural उपलब्धता-and

— naturalheight

यह 2018 में जीतने वाला जवाब है। हर जगह काम करता है। (

— एमडीएन

Answer 3

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

Comments

बेशक - मुझे इसे दस्तावेज़ में नहीं डालना है। उस तरह से करेंगे, चीयर्स!

— पक्के डेका

Answer 4

/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) {
    /* element - DOM element */

    /* For FireFox & IE */
    if(     element.width != undefined && element.width != '' && element.width != 0){
        this.width  =   element.width;
    }
    /* For FireFox & IE */
    else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){
        this.width  =   element.clientWidth;
    }
    /* For Chrome * FireFox */
    else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){
        this.width  =   element.naturalWidth;
    }
    /* For FireFox & IE */
    else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){
        this.width  =   element.offsetWidth;
    }       
        /*
            console.info(' widthWidth width:',      element.width);
            console.info(' clntWidth clientWidth:', element.clientWidth);
            console.info(' natWidth naturalWidth:', element.naturalWidth);
            console.info(' offstWidth offsetWidth:',element.offsetWidth);       
            console.info(' parseInt(this.width):',parseInt(this.width));
        */
    return parseInt(this.width);

}   

var elementWidth    = widthCrossBrowser(element);

Comments

है elementएक jQuery चयन? ऊंचाई के बारे में क्या है?

— इस्तियाक अहमद

Answer 5

बस थोड़ा सा गेब्रियल का दूसरा विकल्प बदलना, उपयोग करने के लिए अधिक आसान होना चाहिए:

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

    newImg.onload = function () {
        if (callback != undefined)
            callback({width: newImg.width, height: newImg.height})
    }

    newImg.src = imgSrc;
}

एचटीएमएल:

<img id="_temp_circlePic" src="http://localhost/myimage.png" 
style="width: 100%; height:100%">

नमूना कॉल:

getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) {
    // do what you want with the image's size.
    var ratio = imgSize.height / $("#_temp_circlePic").height();
});