Javascript: get image size

Question

I cant get correct size for image

Here is the HTML:

<img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
    height="20">


<div id="result"></div>
correct result: 76

And the javascript:

var v1 = $('#image').height();
var v2 = $('#image').removeAttr('height').height();
var i =  $('<img>').attr('src',  $('#image').attr('src'));
var v3 = i.height()

i.one('load', function() {
    var v4 = $(this).height();
    $('#result').text(v1 + " " + v2 + " " + v3 + " " + v4);
}).each(function() {
    if(this.complete) {
        $(this).load();
    }
});

I used 4 methods, and all of them failed.
Updated: method 2 works, but I want to use method 4 because image may be not loaded at the moment of script execution.

Testing link: http://jsfiddle.net/cMZK7/7/

The correct answer is **not** 80. The `
` surrounding the image - which is what you're examining with `$('#image')` - is 24 pixels high because of the padding around the 20 pixel high image. — Pointy, Jul 21 '12 at 14:58
possible duplicate of [Determine original size of image cross browser?](http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser) — dgw, Jul 22 '12 at 11:57

score 2 · Answer 1 · answered Jul 21 '12 at 14:56

2

You are referencing the DIV which the image is on, not the image itself.

answered Jul 21 '12 at 14:56

Dfsgfdgh Fgfdhgfhgh

76
1
5

Thanks, I fixed the code. But methods 3 and 4 still don't work. – Dmitry Jul 21 '12 at 15:03

score 1 · Answer 2 · answered Jul 21 '12 at 14:56

1

The problem might be that you're setting the src attribute before the load event. On many browsers, this will prevent the event handler from firing.

answered Jul 21 '12 at 14:56

Michael Lorton

43,060
26
103
144

score 1 · Answer 3 · answered Jul 21 '12 at 14:57

1

It appears your grabbing the height for the div with the id of image versus grabbing the height of the image inside that div. Try this:

var v1 = $('#image img').height();

answered Jul 21 '12 at 14:57

Ryan Beaulieu

453
3
15

score 1 · Answer 4 · answered Jul 21 '12 at 15:00

1

You have to remove the height attribute, and wait until the image has been loaded (using the load event).

Alternatively, create a new image object, load the same image into it, and wait until the image has been loaded.

answered Jul 21 '12 at 15:00

Guffa

687,336
108
737
1,005

score 1 · Answer 5 · answered Jul 21 '12 at 15:00

1

The first two are getting the height of the surrounding div, rather than the img.

console.log($('img').height(), $('img').width()) gives me 20px and 88px, which are the correct dimensions of the image

answered Jul 21 '12 at 15:00

bcoughlan

25,987
18
90
141

That's the size of resized image. I want to get original image dimensions. – Dmitry Jul 21 '12 at 15:04
Ah, that was unclear from the question. Your question is a duplicate of http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser – bcoughlan Jul 21 '12 at 15:10

score 1 · Answer 6 · answered Jul 21 '12 at 15:08

Not sure I get it, but if the point is to find the value in the height attribute, this will work:

var height = $("#image img").prop('height');

To get the actual height of the image, and by actual height, I mean the height the image actually is, not the height you set in CSS etc., something like this should work:

var img = new Image();
    img.src = $('img', '#image')[0].src;
    img.onload = function() {
        $("#result").html(img.height);
    }

FIDDLE

Older versions of IE will have issue with the onload event when the image is cached.

score 1 · Answer 7 · answered Jul 21 '12 at 15:10

Try this,

<img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />

<script>
$("#image").load(function() {

    alert($("#image").height()); // Alerts 76
    });  

</script>

Fiddle here http://jsfiddle.net/FgrQW/1/

score 0 · Answer 8 · answered Jul 21 '12 at 14:57

0

Try

$('<img>').get()[0].height;

answered Jul 21 '12 at 14:57

Grzegorz Kaczan

21,186
3
19
17

That will create a new image element without a height attribute, so the result will be empty. Even if you get the actual height of the element, it will still not be the height of the image, as the element has no source attribute. – Guffa Jul 21 '12 at 15:05

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Full correct answer: https://stackoverflow.com/a/1944298/966972

(it was in comments for this question, but not in answers)

edited May 23 '17 at 12:05

Community

1
1

answered Aug 04 '12 at 10:54

Dmitry

7,457
12
57
83

Javascript: get image size

9 Answers9