চিত্র ক্রস ব্রাউজারের মূল আকার নির্ধারণ করবেন?

Question 1

<img src='xyz.jpg'>ক্লায়েন্টের পক্ষ থেকে পুনরায় আকার দেওয়ার শারীরিক মাত্রা নির্ধারণের কোনও নির্ভরযোগ্য, কাঠামোর স্বাধীন উপায় কি আছে ?

Question 2

আপনার কাছে 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
}

পেক্কা সম্পাদনা করুন : মন্তব্যে সম্মত হওয়ায় আমি চিত্রটির ´অনলোড´ ইভেন্টে চালানোর জন্য ফাংশনটি পরিবর্তন করেছি। অন্যথায়, বড় ইমেজ সহ, heightএবং widthকিছু ফেরত দেবে না কারণ চিত্রটি এখনও লোড হয়নি।

Question 3

চিত্রগুলির (কমপক্ষে ফায়ারফক্সে) একটি naturalWidth/ উচ্চতার সম্পত্তি রয়েছে যাতে আপনি img.naturalWidthমূল প্রস্থটি পেতে ব্যবহার করতে পারেন

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

সূত্র

Question 4

আপনি জাভাস্ক্রিপ্ট চিত্র অবজেক্টে চিত্রটি প্রিলোড করতে পারেন, তারপরে সেই বস্তুর প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি পরীক্ষা করতে পারেন।

Question 5

/* 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);

Question 6

আরও সহজ হতে ব্যবহারের জন্য, কেবল গ্যাব্রিয়েলের দ্বিতীয় বিকল্পটি পরিবর্তন করা:

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();
});