Getting the height of an image in javascript - javascript

I have this image : <img style="border-bottom-right-radius:0px;" id="cover_image" src="Daft+Punk+Tron+Legacy.jpg" alt="cover" width="851" /> , I have set the width of the image and the photo automatically keeps aspect ratio and resize both width to 851 and height to a certain value, I want to grab the height value with Javascript but it's not working
So far I have tried this:
$(document).ready(function() {
alert($("#cover_image").height());
});
When I try
$(document).ready(function() {
alert($("#cover_image").width());
});
it works and it shows 851 which is the correct value of the width, but when I use height is returns 0.. can you point me in the right direction please ?

Use onload event of the image:
$("#cover_image").on('load',function(){
if(this.complete) alert($(this).height());
});

clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Thanks
AB

Related

Get Image Height according to width in .load()

I need to get Image height and width before loading the Image itself. So I am using jquery .load() method.
$('<img />').attr('src',someURL).load(function(){
console.log(this.width);
console.log(this.height);
})
But problem is that I need the height according to the fix width. Suppose Image is of size 400*417, I need the height according to 200 not 400. For that I add
$('<img />').attr({
'src':someURL,
'width':200}).load(function(){
//Get height and width
})
But Above code is again giving me height 417 not according to width of 200. I am looking for js/jquery/angualrjs. Please help.
Thanks In Advance :)
A bit of math will do the trick. Once you get the actual image dimensions, apply your ratio to get the height you want.
For instance :
$('<img />').attr('src',someURL).load(function(){
console.log(this.width); // prints out 400
console.log(this.height); // prints out 417
var widthIWant = 200;
var heightIWant = this.height * widthIWant / this.width; // Gives you 208.5
})

How to get the height of an image in javascript

Let's say the original height of an image is 200px or lower than 100px. Then I set the 'max-height: 100px' of an image. How would I get its displayed height. I've tried $('img').height(). But is it just returning me a 0 value.
Use window.getComputedStyle ( Firefox, Opera, Safari ) :
example :
<img style="height:100px;max-height:100px;" src="img.gif" id="test">
var img = document.getElementById('test');
var height = window.getComputedStyle(img).height;
console.log(height)
will output 100px
For IE you can use
var height = img.currentStyle.height;
Use simple JavaScript:
var img = document.getElementById('imageid'); // use the id of your image
var height = img.clientHeight;
You need $('img').innerHeight() - Get the current computed height for the first element in the set of matched elements, including padding but not border.
http://api.jquery.com/innerHeight/
$(document).ready(function() {
$("img").load(function() {
alert($(this).height()); // for height
alert($(this).width()); // for width
});
});
Make sure you have jQuery initialized ABOVE this script, as in this case it seems you are trying to use jQuery by the " $ " command.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Put the above code in the head of the document.
in the body, but the image
<body>
<img src="img.jpg" id="new-image" />
</body>
Above is the HTML, the image has an ID of "new-image"
IDs can be selected using jQuery by adding a # before the ID
e.g. "#new-image"
$(document).ready(function(){
// Retrieves computed image height and stores to variable "imgHeight"
var imgHeight = $('#new-image').height();
// Shows current computed/displayed height in development console
console.log(imgHeight);
// If you don't know how to access the development console
// You can also use alert (but you should learn to use the console!)
alert(imgHeight);
}
Make sure to wrap the above code in a script tag.

Getting image dimensions for images that do not have width and height specified in source

I want to get the height and width of an image that does not have its width and height tag specified in the HTML source.
ie
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
What I want to do is get the image's width and the height before it loads up. I am trying to achieve the following task, if you know a better solution please suggest me.
I want to do this because I would like to keep all of the images in my site to less than or equal to 600px. So if an image's width > 600px, I reduce it to 600px. Or else I leave its width unchanged.
My tryouts: None of the codes below work for this task, as they get the image's size once the image is loaded; initially they display zero for width.
<script type="text/javascript">
var img = document.getElementById('my_img');
var width = img.clientWidth;
var height = img.clientHeight;
alert('Width: ' + width + ' Height:' + height); // FAIL
var timg = document.getElementById('test').width;
alert(timg); // FAIL too
</script>
My HTML code:
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
Hope this is clear.
Thank you.
jsFiddle
Why use JavaScript? With this CSS rule you can limit the width to 600px:
#my_img { max-width:600px; }

How can I get the width and height of a dynamically added image?

I have a problem with geting the real width and height of some img tags which are added dynamically. Here is my code:
var imgcont = $("<img src='' /> ");
imgcont.css("display","none").appendTo("body");`
$("div#lightbox ul").on("click","li", function(){
var source = $(this).children("img").attr("src");
console.log(imgcont.attr("src",source).width());
})`
If I click for the the first time I get the correct values for width and height but if I click a second time I get the values of the previous clicked element. In order to get the correct values I have to click again on the same element.
How can I get the correct values for img width and height on the first click?
$("div#lightbox ul").on("click", "li", function() {
var source = $(this).children("img").attr("src");
imgcont.attr("src", source).load(function() { // after load finish
// get width
console.log( this.width ); // according to #Alnitak comment
});
})
You have to wait until the image has loaded before you can access its dimensions.
Catch the image's onload event to handle that.
imgcont.on('load', function() {
console.alert(this.width);
});
Note the use of this.width if you want to get the actual width property of the image, and not its on-screen dimensions. They may not be the same.

Get image size using JQuery/ javascript

please tell me how to get image size of all images in the page using jquery or javascript
The only size you can get is the visible size. clientWidth and clientHeight are two DOM properties which do this. Example:
var image = document.getElementById("id");
var width = image.clientWidth;
var height = image.clientHeight;
If you're using jQuery, you can simply use $.width and $.height:
var width = $("id").width();
var height = $("id").height();
So, to get the size of all images, loop them through:
$("img").each(function()
{
console.log(this.width());
console.log(this.height());
});
If you need the real size, please see this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)
$('img').each(function() {
$(this).width(); // current image's width
$(this).height(); // current image's height
});
please tell me how to get image size
of all images in the page using jquery
or javascript
You can use width() and height() method of jQuery:
$('img').each(function(){
alert('width=' + $(this).width() + '\nHeight=' + $(this).height());
});
More Info:
http://api.jquery.com/width/
http://api.jquery.com/height/

Categories

Resources