জাভাস্ক্রিপ্ট: চিত্রের মাত্রা পান

Question

আমার কাছে কেবল একটি চিত্রের একটি URL রয়েছে। আমাকে কেবল জাভাস্ক্রিপ্ট ব্যবহার করে এই চিত্রটির উচ্চতা এবং প্রস্থ নির্ধারণ করতে হবে। চিত্রটি পৃষ্ঠায় ব্যবহারকারীর কাছে দৃশ্যমান হতে পারে না। কিভাবে আমি এর মাত্রা পেতে পারি?

Comments

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

প্রকৃতপক্ষে এই উত্তরটি কেবলমাত্র সঠিক, কারণ আপনাকে চিত্রটি লোড না হওয়া পর্যন্ত অপেক্ষা করতে হবে।

— শ্যাডো উইজার্ড আপনার পক্ষে কান

Answer 1

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

Comments

যদি না আপনি সিঙ্ক্রোনালি মাত্রা পেতে প্রয়োজন। সেক্ষেত্রে আপনাকে কেবল চিত্রটি নথিতে সন্নিবেশ করতে হবে (ভিউপোর্টের বাইরে কোথাও একটি নিখুঁত অবস্থান ব্যবহার করে) - তারপরে ডকুমেন্ট.এপেন্ডচিল্ড () কল করার পরে মাত্রাগুলি উপলব্ধ available

— JustAndrei

onloadচিত্রের ইউআরএল সেট করার আগে কেন ?

— অজয় গৌর

@ অজয়গৌর কারণ onloadএমন শ্রোতা যে চিত্রটি সঠিকভাবে লোড করা হলে অ্যাসিক্রোনার্স বলা হবে। আপনি ইউআরএল সেট করার পরে যদি শ্রোতাকে সেট করে থাকেন তবে কোডটি নিজেই লোড সেট করে নেওয়ার ঠিক আগে চিত্রটি লোড হতে পারে, ফলস্বরূপ শ্রোতাকে কখনই ডাকা হয় না। উপমাগুলি ব্যবহার করে, আপনি যদি নিজেকে একটি গ্লাস জল দিয়ে পরিবেশন করছেন, আপনি কি প্রথমে জল pourালা এবং তারপরে আপনি গ্লাসটি পূরণ করার জন্য রাখেন? না আপনি কি প্রথমে গ্লাসটি রেখে তারপর জল pourালেন?

— বায়মর্গথ

img.n NaturalWidth এবং img.n NaturalHight সঠিক উত্তর

— কমলেশ

আপনাকে ধন্যবাদ কমলেশ আমার প্রাকৃতিক মাত্রা প্রয়োজন needed

— jahooma

Answer 2

একটি নতুন করুন Image

var img = new Image();

স্থির কর src

img.src = your_src

widthএবং পানheight

//img.width
//img.height

Comments

আমি এই সঠিক কোডটি ব্যবহার করে প্রস্থ এবং উচ্চতার জন্য 0 পাচ্ছি।

— অ্যাডাম কেসি

দেখে মনে হচ্ছে ছবিটি লোড করতে হবে, যা বোঝা যায়।

— অ্যাডাম কেসি

অতিরিক্ত তথ্য - যদিও এটি আমার জন্য প্রথমবারের মতো কাজ করেছিল তা মাঝে মাঝে ছিল। আমি মনে করি সমস্যাটি কারণ ছবিটি ডাউনলোড করা হয়নি। আমি কোডটি চালিয়ে ফিক্সড করেছি যা এইভাবে ওভারলোড ইভেন্ট হ্যান্ডলারটিতে মাত্রা ব্যবহার করে: img.onload = ফাংশন () {};

— শুমিউই

এই কোডটি যতক্ষণ না ব্রাউজার ক্যাশে থাকে ততক্ষণ কাজ করে। একবার ক্যাশে অবৈধ বা মুছে ফেলা হয়। এটি কাজ করবে না। সুতরাং সত্যিই নির্ভরযোগ্য নয়।

— ভারতেশ

এটি কাজ করছে না, যেহেতু চিত্রটি এখনও লোড হয়নি - ইমেজ লোডিং তাত্পর্যপূর্ণভাবে করা হয়, সুতরাং আপনাকে লোড ইভেন্টের জন্য অপেক্ষা করতে হবে।

— ব্যবহারকারী1702401

Answer 3

এটি ফাংশনটি ব্যবহার করে এবং এটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করে।

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

Comments

স্থগিতকারীদের সাথে এই পুনরায় ব্যবহারযোগ্য ফাংশনটি কেন হ্রাস পাবে ?!

— ডেভিডডনহাম

'কেবল জাভাস্ক্রিপ্ট ব্যবহার করছি' এবং এটি jQuery, আমার ধারণা

— অ্যাপোলো

এটি jQuerry ব্যবহার করা হচ্ছে যদিও আপনি আমার কাছ থেকে আপভোট পান। পদ্ধতির বিষয়টি গুরুত্বপূর্ণ।

— ক্র্যাঙ্কুবা

Answer 4

প্রাকৃতিকউইথ এবং প্রাকৃতিক উচ্চতা

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

Answer 5

JQuery সহ চিত্রের আকার পান

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

জাভাস্ক্রিপ্ট সহ চিত্রের আকার পান

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

জাভাস্ক্রিপ্ট (আধুনিক ব্রাউজারগুলি, আই 9 +) দিয়ে চিত্রের আকার পান

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

উপরের বিষয়গুলি সহজভাবে ব্যবহার করুন: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLI छविElement

Answer 6

অনুরূপ প্রশ্ন এখানে জিজ্ঞাসা করা হয়েছে এবং JQuery ব্যবহার করে উত্তর:

Url থেকে দূরবর্তী চিত্রের প্রস্থের উচ্চতা পান

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");

Answer 7

যদি আপনার ইনপুট ফর্ম থেকে চিত্র ফাইল থাকে। আপনি এই মত ব্যবহার করতে পারেন

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

Answer 8

নিম্নলিখিত কোডগুলি পৃষ্ঠার প্রতিটি চিত্রের সাথে চিত্রের বৈশিষ্ট্য উচ্চতা এবং প্রস্থ যুক্ত করে।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>

Comments

প্রশ্নটি ছিল ব্যবহারকারীকে চিত্র না দেখিয়ে চিত্রের মাত্রা পাওয়ার বিষয়ে। চিত্র প্রদর্শিত হওয়ার পরে চিত্রের প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি নির্ধারণ করা একেবারেই বুদ্ধিমান নয়।

— ইয়ারোস্লাভ স্টাভিনিচিয়