উত্তর:
আপনি প্রোগ্রামগতভাবে চিত্রটি পেতে পারেন এবং জাভাস্ক্রিপ্ট ব্যবহার করে মাত্রা পরীক্ষা করতে পারেন ...
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';চিত্রটি যদি মার্কআপের অংশ না হয় তবে এটি কার্যকর হতে পারে।
ক্লায়েন্টউইথ এবং ক্লায়েন্টহাইট হ'ল ডিওএম বৈশিষ্ট্য যা কোনও ডিওএম উপাদানটির অভ্যন্তরীণ মাত্রার (মার্জিন এবং সীমানা বাদ দিয়ে) বর্তমান ব্রাউজারের আকার দেখায়। সুতরাং কোনও আইএমজি উপাদানটির ক্ষেত্রে এটি দৃশ্যমান চিত্রটির আসল মাত্রা পাবে।
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;$.fn.widthএবং $.fn.height।
document.getElementByIdটাইপ করতে দীর্ঘ কিন্তু 10 গুণ বেশি দ্রুত $('#...')[0]।
এছাড়াও (রেক্স এবং ইয়ান এর উত্তর ছাড়াও) আছে:
imageElement.naturalHeightএবং
imageElement.naturalWidthএগুলি ইমেজ ফাইলের উচ্চতা এবং প্রস্থটি দেয় (কেবলমাত্র চিত্রের উপাদানগুলির চেয়ে)।
আপনি যদি jQuery ব্যবহার করছেন এবং আপনি চিত্রের আকারগুলির জন্য অনুরোধ করছেন তারা লোড না হওয়া পর্যন্ত আপনাকে অপেক্ষা করতে হবে বা আপনি কেবল শূন্যই পাবেন।
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});আমি মনে করি যে এই উত্তরের একটি আপডেট দরকারী কারণ সর্বোত্তম ভোট দেওয়া একটি উত্তর clientWidthএবং ক্লায়েন্টহাইট ব্যবহার করার পরামর্শ দেয় যা আমার মনে হয় এখন অপ্রচলিত।
আসলে কোন মানগুলি ফিরে আসে তা দেখতে আমি এইচটিএমএল 5 এর সাথে কিছু পরীক্ষা-নিরীক্ষা করেছি।
প্রথমত, আমি চিত্র API এর ওভারভিউ পেতে ড্যাশ নামে একটি প্রোগ্রাম ব্যবহার করেছি। এটা তোলে যে heightএবং widthঅনুষ্ঠিত উচ্চতা / ইমেজ এবং যে প্রস্থ হয় naturalHeightএবং naturalWidthস্বকীয় উচ্চতা / চিত্র প্রস্থ (এবং শুধুমাত্র HTML5 এর হয়)।
উচ্চতা 300 এবং প্রস্থ 400 এর ফাইল থেকে আমি একটি সুন্দর প্রজাপতির একটি চিত্র ব্যবহার করেছি And এবং এই জাভাস্ক্রিপ্ট:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());তারপরে আমি উচ্চতা এবং প্রস্থের জন্য ইনলাইন সিএসএস সহ এই এইচটিএমএলটি ব্যবহার করেছি।
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />ফলাফল:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150আমি তারপরে এইচটিএমএলকে নিম্নলিখিতটিতে পরিবর্তন করেছি:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />অর্থাত্ ইনলাইন শৈলীর চেয়ে উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি ব্যবহার করা
ফলাফল:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115আমি তারপরে এইচটিএমএলকে নিম্নলিখিতটিতে পরিবর্তন করেছি:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />উদাহরণস্বরূপ এবং বৈশিষ্ট্য এবং সিএসএস উভয়ই ব্যবহার করে কোনটি প্রাধান্য পায় তা দেখতে।
ফলাফল:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150JQuery ব্যবহার করে আপনি এটি করেন:
var imgWidth = $("#imgIDWhatever").width();widthএবং heightবৈশিষ্ট্যগুলি পড়ার চেষ্টা করতে পারেন img।
অন্যান্য সমস্ত জিনিস ভুলে যাওয়া জিনিসটি হ'ল চিত্রের ভার লোড হওয়ার আগে আপনি এটি পরীক্ষা করতে পারবেন না। লেখক যখন পোস্ট করা সমস্ত পদ্ধতি পরীক্ষা করে থাকেন তখন এটি সম্ভবত লোকালহোস্টে কাজ করবে। যেহেতু এখানে jQuery ব্যবহার করা যেতে পারে তাই মনে রাখবেন যে চিত্রগুলি লোড হওয়ার আগে 'প্রস্তুত' ইভেন্টটি নিক্ষেপ করা হবে। '(' # xxx ')। প্রস্থ () এবং। দৈর্ঘ্য () অনলোড ইভেন্ট বা পরে চালানো উচিত।
আপনি লোড ইভেন্টের কলব্যাক ব্যবহার করে কেবল এটি করতে পারবেন কারণ চিত্রটি আকার লোড করা শেষ না হওয়া পর্যন্ত আকারের জানা যায় না। নীচের কোডটির মতো কিছু ...
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}
function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';সঙ্গে jQuery এর library-
ব্যবহার করুন .width()এবং .height()।
JQuery প্রস্থ এবং jQuery উচ্চতা আরও ।
$(document).ready(function(){
$("button").click(function()
{
alert("Width of image: " + $("#img_exmpl").width());
alert("Height of image: " + $("#img_exmpl").height());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>ঠিক আছে বলছি, আমি মনে করি উত্স কোডটি উন্নত করে ছবিটির বৈশিষ্ট্যগুলি অনুসন্ধান করার আগে চিত্রটি লোড করতে সক্ষম হলাম অন্যথায় এটি '0 * 0' প্রদর্শিত হবে কারণ ফাইলটি লোড হওয়ার আগে পরবর্তী বিবৃতিটি ডাকা হত ব্রাউজার Jquery প্রয়োজন ...
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
p = $(newImg).ready(function(){
return {width: newImg.width, height: newImg.height};
});
alert (p[0]['width']+" "+p[0]['height']);
}ধরে নিচ্ছি, আমরা এর চিত্রের মাত্রা পেতে চাই <img id="an-img" src"...">
// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById("an-img");
console.log({
"naturalWidth": el.naturalWidth, // Only on HTMLImageElement
"naturalHeight": el.naturalHeight, // Only on HTMLImageElement
"offsetWidth": el.offsetWidth,
"offsetHeight": el.offsetHeight
});
প্রাকৃতিক মাত্রা
el.naturalWidthএবং el.naturalHeightআমাদের প্রাকৃতিক মাত্রা পেতে হবে , ইমেজ ফাইলের মাত্রা পাবেন।
বিন্যাসের মাত্রা
el.offsetWidthএবং el.offsetHeightডকুমেন্টে উপাদানটি যে রেন্ডার করা হয় সেগুলি আমাদের পেতে হবে।
আপনি imageDimensions()যদি প্রতিশ্রুতি ব্যবহার করে ভয় পান না তবে আপনার নিম্নলিখিত ( ) এর মতো সাধারণ কাজ করতে পারে ।
// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
const img = new Image()
// the following handler will fire after the successful parsing of the image
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}
// and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
img.onerror = () => {
reject('There was some problem with the image.')
}
img.src = URL.createObjectURL(file)
})
// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
const [file] = files
try {
const dimensions = await imageDimensions(file)
console.info(dimensions)
} catch(error) {
console.error(error)
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
Select an image:
<input
type="file"
onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>ভেবেছিলেন যে 2019 এ জাভাস্ক্রিপ্ট এবং / অথবা টাইপসক্রিপ্ট ব্যবহার করছেন তাদের পক্ষে এটি সহায়ক হতে পারে।
আমি নিম্নলিখিতটি পেয়েছি, যেমনটি কেউ কেউ বলেছে, ভুল হতে পারে:
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";এটি সঠিক:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";উপসংহার:
ফাংশনে imgনা this, ব্যবহার করুন onload।
ফ্লেক্স স্লাইডারে একটি ত্রুটির জন্য সম্প্রতি আমার একই সমস্যা ছিল। লোডিং বিলম্বের কারণে প্রথম চিত্রের উচ্চতাটি ছোট সেট করা হয়েছিল। আমি এই সমস্যাটি সমাধান করার জন্য নিম্নলিখিত পদ্ধতিটি চেষ্টা করেছি এবং এটি কাজ করেছে।
// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';এটি আপনাকে মূল প্রস্থ বা জিরোর পরিবর্তে আপনি যে প্রস্থ নির্ধারণ করেছেন তার সাথে সম্মানের সাথে উচ্চতা দেবে।
আপনি এটি ব্যবহার করতে পারেন:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;নিকি ডি মায়ার একটি ব্যাকগ্রাউন্ড ছবির পরে জিজ্ঞাসা করলেন; আমি কেবল এটি CSS থেকে পেয়েছি এবং "url ()" প্রতিস্থাপন করেছি:
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}s.substr(4,s.length-5)
সহজভাবে, আপনি এটি পরীক্ষা করতে পারেন।
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser 360 browser ...প্যারেন্ট ডিভ থেকে ব্রাউজারটিকে ব্যাখ্যা করা সেটিংস মুছে ফেলা গুরুত্বপূর্ণ। সুতরাং আপনি যদি আসল চিত্রের প্রস্থ এবং উচ্চতা চান তবে আপনি কেবল ব্যবহার করতে পারেন
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});এটি আমার কাছ থেকে পাওয়া একটি টিওয়াইপিও 3 প্রকল্পের উদাহরণ যেখানে আমার সঠিক সম্পর্কের সাথে স্কেল করার জন্য চিত্রটির আসল বৈশিষ্ট্য প্রয়োজন।
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
//Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.এটি আমার পদ্ধতি, আশা করি এটি সহায়ক। :)
function outmeInside() {
var output = document.getElementById('preview_product_image');
if (this.height < 600 || this.width < 600) {
output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
} else {
output.src = URL.createObjectURL(event.target.files[0]);
}
return;
}
img.src = URL.createObjectURL(event.target.files[0]);
}একাধিক চিত্র পূর্বরূপ এবং আপলোড জন্য এই কাজ। যদি আপনার প্রতিটি চিত্রের জন্য এক এক করে নির্বাচন করতে হয়। তারপরে সমস্ত পূর্বরূপ চিত্র ফাংশনটিতে অনুলিপি করুন এবং অতীত করুন !!!
আমরা সঠিক ফাইলটি নির্বাচন করার সময় ইনপুট উপাদান দ্বারা প্রাপ্ত ইমগ ফাইল অবজেক্টটি পাস করুন এটি চিত্রের নেটালাল উচ্চতা এবং প্রস্থ দেবে
function getNeturalHeightWidth(file) {
let h, w;
let reader = new FileReader();
reader.onload = () => {
let tmpImgNode = document.createElement("img");
tmpImgNode.onload = function() {
h = this.naturalHeight;
w = this.naturalWidth;
};
tmpImgNode.src = reader.result;
};
reader.readAsDataURL(file);
}
return h, w;
}