जवाबों:
आप प्रोग्राम को छवि प्राप्त कर सकते हैं और जावास्क्रिप्ट का उपयोग करके आयामों की जांच कर सकते हैं ...
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';यह उपयोगी हो सकता है अगर छवि मार्कअप का हिस्सा नहीं है।
clientWidth और clientHeight DOM गुण हैं जो DOM तत्व (मार्जिन और बॉर्डर को छोड़कर) के आंतरिक आयामों के वर्तमान-ब्राउज़र आकार को दिखाते हैं। तो IMG तत्व के मामले में, यह दृश्यमान छवि का वास्तविक आयाम प्राप्त करेगा।
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और क्लाइंटहाइट का सुझाव दिया गया है , जो मुझे लगता है कि अब अप्रचलित है।
मैंने HTML5 के साथ कुछ प्रयोग किए हैं, यह देखने के लिए कि वास्तव में कौन से मूल्य मिलते हैं।
सबसे पहले, मैंने छवि एपीआई का अवलोकन प्राप्त करने के लिए डैश नामक एक कार्यक्रम का उपयोग किया। यह बताता है कि heightऔर widthछवि की प्रदान की गई ऊँचाई / चौड़ाई है और वह है naturalHeightऔर छवि naturalWidthकी आंतरिक ऊँचाई / चौड़ाई है (और केवल HTML5 हैं)।
मैंने एक सुंदर तितली की एक छवि का उपयोग किया, जिसकी ऊँचाई 300 और चौड़ाई 400 वाली फ़ाइल से है। और यह जावास्क्रिप्ट:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());तब मैंने इस HTML का उपयोग किया, ऊंचाई और चौड़ाई के लिए इनलाइन सीएसएस के साथ।
<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मैंने तब HTML को निम्न में बदल दिया:
<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मैंने तब HTML को निम्न में बदल दिया:
<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')। चौड़ाई () और .height () को ऑनलोड घटना या बाद में निकाल दिया जाना चाहिए।
आप केवल लोड ईवेंट के कॉलबैक का उपयोग करके वास्तव में ऐसा कर सकते हैं क्योंकि छवि का आकार तब तक ज्ञात नहीं है जब तक कि यह वास्तव में लोडिंग समाप्त न हो। नीचे दिए गए कोड की तरह कुछ ...
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 पुस्तकालय
का उपयोग करें .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, नहीं ।thisonload
हाल ही में फ्लेक्स स्लाइडर में त्रुटि के लिए मेरे पास एक ही मुद्दा था। लोडिंग में देरी के कारण पहली छवि की ऊंचाई छोटी थी। मैंने उस मुद्दे को हल करने के लिए निम्नलिखित विधि की कोशिश की और यह काम कर रहा है।
// 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;निकी डी मेयर ने पृष्ठभूमि की तस्वीर के बाद पूछा; मैं बस इसे सीएसएस से प्राप्त करता हूं और "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), यह आँखों पर कम से कम आसान है;)
जब पृष्ठ इस तरह से js या jquery में लोड होता है तो आप ऑनलोड हैंडलर संपत्ति को लागू कर सकते हैं: -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});बस, आप इस तरह का परीक्षण कर सकते हैं।
<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();
});यह मुझसे एक TYPO3 प्रोजेक्ट उदाहरण है जहां मुझे सही संबंध के साथ स्केल करने के लिए छवि के वास्तविक गुणों की आवश्यकता है।
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]);
}एकाधिक छवि पूर्वावलोकन और अपलोड के लिए यह काम। यदि आपको एक-एक करके प्रत्येक चित्र के लिए चयन करना है। फिर सभी पूर्वावलोकन छवि फ़ंक्शन में कॉपी और पेस्ट करें और सत्यापित करें !!!
बस img फ़ाइल ऑब्जेक्ट जो इनपुट तत्व द्वारा प्राप्त किया गया है पास करें जब हम सही फ़ाइल का चयन करते हैं तो यह शुद्ध ऊंचाई और छवि की चौड़ाई देगा
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;
}