জাভাস্ক্রিপ্ট সহ কোনও চিত্রের আসল প্রস্থ এবং উচ্চতা পাবেন? (সাফারি / ক্রোমে)

278

আমি একটি jQuery প্লাগইন তৈরি করছি।

সাফারিতে জাভাস্ক্রিপ্টের সাথে আমি কীভাবে আসল চিত্রের প্রস্থ এবং উচ্চতা পাব?

ফায়ারফক্স 3, আই 7 এবং অপেরা 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();

কিন্তু ওয়েবকিট ব্রাউজারগুলিতে সাফারি এবং গুগল ক্রোমের মানগুলি 0 হয়।

javascript  jquery  safari  google-chrome  webkit 
— ফ্রাঙ্ক ব্যানিস্টার
সূত্র
4
গৃহীত উত্তরটি চিত্রের লোড ইভেন্টটি ব্যবহার করে। নিখুঁত জ্ঞান তোলে, কিন্তু চিত্রগুলি ক্যাশে করা যেতে পারে এমন পরিস্থিতিতে (আমার হতাশার অনেকটা) একটি অবিশ্বাস্য সমাধান হিসাবে দেখা যাচ্ছে।
— নসরেডনা
সাম্প্রতিক ওয়েবকিটে পরীক্ষিত এটি আমার গ্রহণ আপনাকে সহায়তা করতে পারে। stackoverflow.com/questions/318630/...
— xmarcos
5
@ নসরডেনা, আপনি চিত্রগুলি লোড করা কার্যক্রমে আগ্রহী হতে পারেন যা চিত্রগুলি ক্যাশে করা হলেও এমনটি হবে।
— bejonbee
7
এই প্রশ্নের সঠিক উত্তরটি হ'ল ন্যাচারালউইথ এবং ন্যাচারাল হাইটের বৈশিষ্ট্যগুলি ব্যবহার করা। কোনও হ্যাকারি লাগবে না।
— ডেভিড জনস্টোন
আপনি ডকুমেন্ট প্রস্তুতের পরিবর্তে উইন্ডো লোডে ঠিক যা করছেন তা করতে পারেন
— ব্যবহারকারী 1380540

উত্তর:

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

সিএসএসের চিত্রের মাত্রায় যে কোনও প্রভাব থাকতে পারে তা এড়াতে উপরের কোডটি চিত্রটির একটি মেমরি অনুলিপি তৈরি করে। এটি এফডিস্ক দ্বারা প্রস্তাবিত একটি খুব চালাক সমাধান ।

আপনি naturalHeightএবং naturalWidthএইচটিএমএল 5 বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন ।

— জাভি
সূত্র
5
এটি চালাক, আপনি জানেন না didn't (img) .লোড ();
— সানজেএ
3
ছাড়াও widthএবং heightআপনি সম্ভবত এছাড়াও মুছে ফেলা আবশ্যক min-width, min-height, max-widthএবং max-heightযেমন তারা চিত্রের আকারসমূহ প্রভাবিত করতে পারে।
— mqchen
5
এফডিস্কের সমাধানটি খুব চালাক। দুর্ভাগ্যক্রমে তিনি যেমন লিখেছেন সমাধানটি কেবল তখনই কাজ করবে যদি চিত্রটি ক্যাশে করা হয় বা পৃষ্ঠাটি ইতিমধ্যে ডাউনলোড শেষ হয়ে গেছে। যদি চিত্রটি ক্যাশে না করা হয় বা এই কোডটি আগে কল করা হয় window.onload, তবে উচ্চতা / প্রস্থের 0 ফিরে আসতে পারে। যাই হোক না কেন, আমি FDisk এর ধারণাটিকে উপরের সমাধানের সাথে একীভূত করেছি।
— জাভি
5
যখন আমি কনসোল.লগ করার চেষ্টা করি (pic_real_height) আমি প্রতিবার অপরিজ্ঞাত হয়ে যাই। ক্রোম, এফএফ, আই 9
— হেলগাটিভিকিং
10
আপনার এখানে যে সমস্যা থাকতে পারে তা হ'ল load()অ্যাসিনক্রোনিক্যালি কার্যকর করা হবে তাই যদি আপনি অ্যাক্সেস করতে চান widthএবং height- সেগুলি এখনও সেট করা নাও হতে পারে। পরিবর্তে load()নিজেই "যাদু" করুন !
— দাগ্রাভিস 15:58
286

এইচটিএমএল 5naturalHeight এবং naturalWidthথেকে বৈশিষ্ট্যগুলি ব্যবহার করুন ।

উদাহরণ স্বরূপ:

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

আইই 9 +, ক্রোম, ফায়ারফক্স, সাফারি এবং অপেরা ( পরিসংখ্যান ) এ কাজ করে।

— sandstrom
সূত্র
3
@ ডেভিড জোনস্টোন তাদের ব্যবহারের একটি উদাহরণ সাহায্য করতে পারে। তবে আমি সম্মত, অবশ্যই উচ্চতর হওয়ার যোগ্য।
— স্টিফেন
5
এটি ফায়ারফক্স (30.0) এর সর্বশেষ সংস্করণে কাজ করবে বলে মনে হচ্ছে না যদি না ছবিটি ইতিমধ্যে ক্যাশে উপস্থিত থাকে।
— জোয়েল কিনজেল
1
আমি ডেভিড জনস্টনের সাথে একমত এটি দুর্দান্ত খবর।
— jchwebdev
মনে রাখবেন যে চিত্রটি লোড হওয়ার জন্য আপনাকে এখনও অপেক্ষা করতে হবে
— জেসেস কেরেরা
না, ক্লায়েন্টহাইট / ক্লায়েন্টউইথ স্পষ্টভাবে প্রশ্ন জিজ্ঞাসা করে না। এটি পৃষ্ঠার মতো দেখতে ইমেজের উচ্চতা এবং প্রস্থ নয় চিত্রের উচ্চতা এবং প্রস্থকে ফিরিয়ে আনতে হবে। প্রাকৃতিকউইথ এবং প্রাকৃতিক উচ্চতা সঠিক।
— জেরোইন ভ্যান ডেন ব্রুক
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
FDisk jQuery দিয়ে চিত্রটির ক্লোনিং করার পরামর্শ দিচ্ছে না। তিনি একটি নতুন Imageঅবজেক্ট তৈরি করার পরামর্শ দিচ্ছেন , তারপরে এর widthসম্পত্তিটি দেখুন। এটি একটি সহজ, মার্জিত পদ্ধতির। এফডিস্ক, আপনার আমার ভোট আছে। :)
— ডেভিডচেম্বার
3
এটি সিএসএস সমস্যাগুলি এড়াতে খুব চতুর উপায়। দুর্ভাগ্যক্রমে উপরে লেখা হিসাবে সমাধানটি কেবল তখনই কাজ করবে যদি চিত্রটি ক্যাশে করা হয় বা ইতিমধ্যে ডাউনলোড শেষ হয়ে গেছে। যদি চিত্রটি ক্যাশে না করা হয় বা এই কোডটি আগে কল করা হয় window.onload, তবে 0 প্রস্থটি ফিরে আসতে পারে।
— জাভি
1
আমি ইমেজ গ্যালারী মোবাইল ফোনের জন্য একটি ওয়েবসাইটে এই পদ্ধতির ব্যবহার করছি। এরপরে বড় আকারের চিত্রগুলি সিএসএসে 100% এবং মূল মাত্রায় আরও ছোট সহ প্রদর্শিত হয়।
— এফডিস্ক
1
জাভি যেমন উল্লেখ করেছেন, এটি আই 8 এ ব্যর্থ হয় এবং কখনও কখনও চিত্র ক্যাশে নির্ভর করে। সুতরাং আমি এটিকে এই পদ্ধতির সাথে একত্রিত করেছি এবং এটি নিখুঁতভাবে কাজ করে: লোড ইভেন্টটিকে প্রথমে বেঁধে রাখুন
— কেভিন সি।
16

মূল সমস্যাটি হ'ল ওয়েবকিট ব্রাউজারগুলি (সাফারি এবং ক্রোম) জাভাস্ক্রিপ্ট এবং সিএসএসের তথ্য সমান্তরালভাবে লোড করে। সুতরাং, জাভাস্ক্রিপ্ট সিএসএসের স্টাইলিং প্রভাবগুলি গণনা করার আগেই কার্যকর করা যেতে পারে, ভুল উত্তর ফিরিয়ে দেয়। 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
সূত্র
হ্যাঁ, কারণ। জিকুয়েরির লোড-ইভেন্টটি ব্যবহার করা আরও ভাল কাজ ound
— ফ্র্যাঙ্ক ব্যানিস্টার
6
$(window).load(function(){ ... });আমার ক্ষেত্রে সহায়তা করেছে
— kolypto
16

onloadওয়েবকিট ক্যাশে থেকে কোনও চিত্র লোড করা হলে ইভেন্টটি চালিত হয় না এমন সমস্যা সম্পর্কে স্বীকৃত উত্তরে প্রচুর আলোচনা রয়েছে ।

আমার ক্ষেত্রে, onloadক্যাশেড চিত্রগুলির জন্য অগ্নিকান্ডগুলি, তবে উচ্চতা এবং প্রস্থটি এখনও 0 A একটি সহজ 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;কৌশলটির সংমিশ্রণ হবে হবে।

(মনে রাখবেন যে আমার উদ্দেশ্যগুলির জন্য, আমি চিত্রের বৈশিষ্ট্য বা সিএসএস শৈলীতে পূর্বনির্ধারিত মাত্রাগুলি সম্পর্কে উদ্বিগ্ন নই - তবে জাভির উত্তর অনুসারে আপনি সেগুলি সরাতে চাইবেন the বা চিত্রটি ক্লোন করুন))

— JKS
সূত্র
আইই 7 এবং আইই 8 নিয়ে আমার এই খুব সমস্যা হয়েছিল। সেটটাইমআউট () ব্রাউজারগুলির জন্য আমার পক্ষে কাজ করেছিল। ধন্যবাদ!
— ভ্যাসিল টোমাইগা
11

এটি 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সম্পত্তি সম্পর্কে ?

Chrome, সাফারি এবং ফায়ারফক্সে বেশ কয়েকটি সংস্করণে দুর্দান্ত কাজ করে মনে হচ্ছে তবে IE8 বা এমনকি আই 9 তে নয়।

— অ্যান্ড্রু ম্যাকেনজি
সূত্র
এটি আমার ক্ষেত্রে কাজ করছে না।
— বিনিময়ে
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 বর্গ = "টোডারডাইমেনশনস" এর সাথে কাজ করে ...

— শিয়াল
সূত্র
5

জ্যাকুরিতে দুটি প্রাকৃতিক বৈশিষ্ট্য রয়েছে যা প্রাকৃতিকউইথ এবং ন্যাচারাল হাইট হয়, আপনি এইভাবে ব্যবহার করতে পারেন।

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

যেখানে আমার- img একটি শ্রেণীর নাম যা আমার চিত্র নির্বাচন করতে ব্যবহৃত হয়।

— স্যামুয়েল সান্টোস
সূত্র
2
এগুলি jQuery পদ্ধতি নয়। naturalWidth(এবং উচ্চতা) চিত্র উপাদান বস্তুর বৈশিষ্ট্য properties বিকাশকারী.মোজিলা.আর.ইন
— ডকস
3

যেমন আগেই বলা হয়েছে, জাভি উত্তর চিত্রগুলি ক্যাশে থাকলে কাজ করবে না। ইস্যুটি ক্যাশযুক্ত চিত্রগুলিতে লোড ইভেন্টটি ফায়ার না করে ওয়েবকিটকে প্রতিক্রিয়া জানায়, সুতরাং প্রস্থ / উচ্চতা অ্যাট্রেসগুলিকে img ট্যাগে কোনও স্পষ্টভাবে সেট না করা থাকলে, চিত্রগুলি পাওয়ার একমাত্র নির্ভরযোগ্য উপায় হ'ল window.loadইভেন্টটি বহিষ্কার হওয়ার জন্য অপেক্ষা করা।

window.loadঘটনা আগুন দেবেন সবসময় , তাই এটি কোন কৌতুক ছাড়া পরে প্রস্থ / উচ্চতা এবং চিত্র অ্যাক্সেস করার জন্য সুরক্ষিত।

$(window).load(function(){

   //these all work

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

});

আপনার যদি গতিশীলভাবে লোড হওয়া চিত্রগুলির আকার পেতে হয় যা ক্যাশে হতে পারে (পূর্বে লোড করা হয়েছে), আপনি ক্যাভি রিফ্রেশটি ট্রিগার করতে জাভি পদ্ধতি এবং কোয়েরি স্ট্রিং ব্যবহার করতে পারেন। ক্ষতিটি হ'ল এটি সার্ভারের কাছে অন্য একটি অনুরোধের কারণ ঘটবে, এমন একটি ইম্জির জন্য যা ইতিমধ্যে ক্যাশে রয়েছে এবং ইতিমধ্যে উপলব্ধ থাকতে হবে। বোকা ওয়েবকিট

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: আপনার যদি img.srcইতিমধ্যে কোয়েরিস্ট্রিং থাকে তবে আপনাকে এটি বিশ্লেষণ করতে হবে এবং ক্যাশে সাফ করার জন্য অতিরিক্ত পরম যুক্ত করতে হবে ।

— xmarcos
সূত্র
1
কোডের প্রথম ব্লকটি কেবল কোনও চিত্রের নয়,
— লোডড ডোমে
1
এটি হ'ল দ্রুততম এবং সর্বাধিক কার্যকর সমাধান। কোনও প্লাগইন নেই, কোন কৌশল নেই! আমি একটি অনুরূপ উত্তর পোস্ট করতে যাচ্ছি কিন্তু আপনার খুঁজে পেয়েছি।
— ভ্যান্ট্রং-কনকন
2

লুক স্মিথ যেমন বলেছিলেন, চিত্রের বোঝা একটি গোলযোগ । এটি সমস্ত ব্রাউজারে নির্ভরযোগ্য নয়। এই সত্যটি আমাকে প্রচণ্ড ব্যথা দিয়েছে। একটি ক্যাশেড চিত্র কিছু ব্রাউজারগুলিতে ইভেন্টটিকে মোটেও আগুন দেবে না, সুতরাং যারা "ইমেজ লোড সেটটাইমআউট এর চেয়ে ভাল" বলেছিলেন তারা ভুল।

লুক স্মিথ এর সমাধান এখানে।

এবং এই গণ্ডগোলটি কীভাবে jQuery 1.4 এ পরিচালনা করা যায় সে সম্পর্কে একটি আকর্ষণীয় আলোচনা রয়েছে ।

আমি খুঁজে পেয়েছি যে প্রস্থটি 0 তে সেট করা বেশ নির্ভরযোগ্য, তারপরে "সম্পূর্ণ" সম্পত্তিটি সত্য হওয়ার জন্য এবং প্রস্থের সম্পত্তিটি শূন্যের চেয়ে বেশি আসার জন্য অপেক্ষা করুন। আপনারও ত্রুটিগুলির জন্য নজর রাখা উচিত।

— Nosredna
সূত্র
উত্তরের দ্বিতীয় লিঙ্কটি মারা গেছে।
— প্যাং
2

আমার পরিস্থিতি সম্ভবত কিছুটা আলাদা। আমি গতিশীলভাবে জাভাস্ক্রিপ্টের মাধ্যমে একটি চিত্রের এসআরসি পরিবর্তন করছি এবং এটি নিশ্চিত করতে প্রয়োজন যে নতুন চিত্রটি একটি নির্দিষ্ট পাত্রে (কোনও ফটো গ্যালারিতে) ফিট করার জন্য আনুপাতিক আকারের আকারযুক্ত। আমি প্রথমে চিত্রটির প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি লোড হওয়ার পরে (চিত্রটির লোড ইভেন্টের মাধ্যমে) সরিয়েছি এবং পছন্দসই মাত্রাগুলি গণনা করার পরে এগুলি পুনরায় সেট করেছি। যাইহোক, এটি সাফারি এবং সম্ভবত আই-তে কাজ করে না (আমি এটি IE তে পুরোপুরি পরীক্ষা করে দেখিনি, তবে চিত্রটি এমনকি দেখায় না, তাই ...)।

যাইহোক, সাফারি পূর্ববর্তী চিত্রটির মাত্রা রাখে যাতে মাত্রা সর্বদা একটি চিত্র পিছনে থাকে। আমি ধরে নিই এর ক্যাশের সাথে কিছু করার আছে। সুতরাং সবচেয়ে সহজ সমাধানটি হ'ল চিত্রটি ক্লোন করুন এবং এটি ডিওমে যুক্ত করুন (এটি গুরুত্বপূর্ণ যে এটি ডিওমে যুক্ত করতে এবং উচ্চতাটি পাবেন)। চিত্রটি লুকিয়ে থাকাটির একটি দৃশ্যমানতার মানটি দিন (ডিসপ্লে কোনওটি ব্যবহার করবেন না কারণ এটি কাজ করবে না)। আপনি মাত্রা পাওয়ার পরে ক্লোনটি সরান।

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

সম্প্রতি ডায়ালগের প্রতিনিধিত্বমূলক গ্রাফের ডিফল্ট আকার নির্ধারণের জন্য আমার প্রস্থ এবং উচ্চতা সন্ধান করতে হবে। সমাধান আমি ব্যবহার করি:

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

আমার জন্য এটি FF3, অপেরা 10, IE 8,7,6 এ কাজ করে

পিএস আপনি লাইটবক্স বা কালারবক্সের মতো কিছু প্লাগইনগুলির ভিতরে আরও কিছু সমাধান খুঁজছেন

— SDemonUA
সূত্র
1

জাভির জবাব যোগ করতে পল আইরিশের গিথব ডেভিড দেশান্দ্রোর গিটগব ইমেজস লডেড () নামে একটি ফাংশন সরবরাহ করে একই নীতিগুলিতে কাজ করে করে এবং কিছু ব্রাউজারের ক্যাশেড চিত্রগুলি ফায়ার লোড () ইভেন্টটি চালিত না করে (চতুর অরিজিনাল_সিআরসি -> সহ) - ডেটা_রি -> আসল_এসআরসি স্যুইচিং)।

এটি নিয়মিতভাবে ব্যবহৃত হয় এবং আপডেট হয় যা সমস্যার সর্বাধিক মজাদার সমাধান, আইএমওতে অবদান রাখে।

— RobW
সূত্র
1
আপনি imagesLoadedএখানে ফাংশনটির একটি আপডেট সংস্করণ খুঁজে পেতে পারেন : github.com/desandro/imagesloaded
— bejonbee
হ্যাঁ, ডেভিড দেশান্দ্রো এখন ফাংশনটি পরিচালনা করছেন। আমাকে উত্তর দেওয়ার জন্য @ সামোথিং গাইন্ডওয়াইয়ার্ডকে স্মরণ করিয়ে দেওয়ার জন্য ধন্যবাদ।
— রবডাব্লু
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

আমি ইমেজস লডেড জ্যাকুরি প্লাগইন ব্যবহার করে কিছুটা কাজের ইউটিলিটি ফাংশন করেছি: 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}));
            },

আপনি এটি ইউআরএল, ফাংশন এবং এর প্রসঙ্গে পাস করে ব্যবহার করতে পারেন। চিত্রটি লোড হওয়ার পরে তৈরি করা চিত্রটি, এর প্রস্থ এবং উচ্চতা ফাংশন সম্পাদন করা হয়।

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
— জেডেনেক ম্লাওচ
সূত্র
1

ছবিটি ইতিমধ্যে ব্যবহার করা থাকলে, আপনি শোলড:

  1. প্রাথমিকভাবে চিত্রের আকার নির্ধারণ করুন

    image.css ('প্রস্থ', 'প্রাথমিক'); image.css ('উচ্চতা', 'প্রাথমিক');

  2. মাত্রা পান

    var originalWidth = $ (এটি)। প্রস্থ (); var originalHeight = $ (এটি) .হাইট ();

— সেবাস্তিয়ান রোজাস
সূত্র
1

আপনি এইচটিএমএল ইমেজ উপাদানটির ন্যাচারালউইথ এবং ন্যাচারাল হাইট বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। (আরও তথ্য এখানে )।

আপনি এটি এর মতো ব্যবহার করবেন:

//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 বাদে সমস্ত ব্রাউজারে কাজ করে।

— জাইর রেইনা
সূত্র
হ্যাঁ, আর আইই 8 নেই: ডি
— জায়ের রেইনা
0

আমি ডিওর উত্তরটি পরীক্ষা করে দেখলাম এবং এটি আমার পক্ষে দুর্দান্ত কাজ করে।

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

আপনি আপনার সমস্ত ফাংশনকে পাশাপাশি কল করেছেন তা নিশ্চিত করুন। যেটি ফ্যাদইইন () এর পুনরায় কলকারীটিতে চিত্রের আকারের সাথে হ্যান্ডেল দেয়।

এর জন্য ধন্যবাদ.

— 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
এটি দুর্দান্ত সমাধান নয় এবং এজেএক্স লোডিংয়ের যে কোনও সমাধান সমাধানের চেয়ে বেশি সময় নেবে।
— হাফপাস্টফোর.কম
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/ আপনি চিত্রাবলম্বড () ফাংশনের মধ্যে উচ্চতা এবং প্রস্থ সন্ধান করতে পারেন।

— পল ম্যাসন
সূত্র
0

আমার নিজের প্রশ্নের উত্তর খুঁজে পাওয়ার চেষ্টা করে এই থ্রেডে হোঁচট খেয়েছে। আমি লোডারের পরে কোনও ফাংশনে একটি চিত্রের প্রস্থ / উচ্চতা পাওয়ার চেষ্টা করছিলাম এবং 0 দিয়ে আসছি I আমি মনে করি এটি আপনি যা খুঁজছেন তা হতে পারে, যদিও এটি আমার পক্ষে কাজ করে:

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>
<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
এটি একেবারেই কাজ করে না। এটি উভয়ের জন্য অপরিবর্তিত ফিরবে
— ক্রিস সিনেলি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.