use jQuery to get 'true size' of image without removing the class

Question

I am using Jcrop on an image that is resized with css for uniformity.

JS

<script type="text/javascript">
    $(window).load(function() {
        //invoke Jcrop API and set options
        var api = $.Jcrop('#image', { onSelect: storeCoords, trueSize: [w, h] });
        api.disable(); //disable until ready to use

        //enable the Jcrop on crop button click
        $('#crop').click(function() {
            api.enable();
        });
    });
    function storeCoords(c) {
    $('#X').val(c.x);
    $('#Y').val(c.y);
    $('#W').val(c.w);
    $('#H').val(c.h);
    };
</script>

HTML

<body>
    <img src="/path/to/image.jpg" id="image" class="img_class" alt="" />
     <br />
     <span id="crop" class="button">Crop Photo</span>
     <span id="#X" class="hidden"></span>
     <span id="#Y" class="hidden"></span>
     <span id="#W" class="hidden"></span>
     <span id="#H" class="hidden"></span>
</body>

CSS

body { font-size: 13px; width: 500px; height: 500px; }
.image { width: 200px; height: 300px; }
.hidden { display: none; }

I need to set the h and w variables to the size of the actual image. I tried using the .clone() manipulator to make a copy of the image and then remove the class from the clone to get the sizing but it sets the variables to zeros.

var pic = $('#image').clone();
pic.removeClass('image');
var h = pic.height();
var w = pic.width();

It works if I append the image to an element in the page, but these are larger images and I would prefer not to be loading them as hidden images if there is a better way to do this. Also removing the class, setting the variables, and then re-adding the class was producing sporadic results.

I was hoping for something along the lines of:

$('#image').removeClass('image', function() {
    h = $(this).height();
    w = $(this).width();
}).addClass('image');

But the removeClass function doesn't work like that :P

possible duplicate of [Get True Dimensions of an Image with JQuery](http://stackoverflow.com/questions/4434489/get-true-dimensions-of-an-image-with-jquery) — Pekka, Jan 08 '11 at 01:00
Not really...I understand how to get the height/width of the image. My question is how the best way is to do this without altering the image (removing the class). — jon3laze, Jan 08 '11 at 01:14
Since you are loading it hidden, is there any chance you can load it full size, *then* modify the HTML to set the desired width and height? After all, you have to download the full-sized image in any case — Joe Mabel, Jan 08 '11 at 01:24
@Joe Mabel That is what I am currently doing, I wanted to see if maybe there was a better way where the end user wouldn't end up loading it twice. It may be that this method is the only/best way tho. — jon3laze, Jan 08 '11 at 01:27
@JoeMabel: Can you detail the 'sporadic results' you were seeing with removing and then adding the class back? — Andrew Whitaker, Jan 08 '11 at 03:53
@Andrew Whitaker: The sporadic results I was seeing was the image class randomly not being reapplied correctly and the image displaying full size, as well as a few occasions where it failed to display at all. I'm not going to blame the method itself, as it may be conflicts with other scripts or .NET choking. So far I've resigned to cloning the image, hiding it, and then pulling the dimensions that way. — jon3laze, Jan 08 '11 at 04:29
@jon3laze: Okay--I was able to make it work with one image and hiding the image, removing the class, taking the measurements, adding the class, and then showing the element again. Not sure what will happen if this is done with multiple images though. — Andrew Whitaker, Jan 08 '11 at 04:45
@Andrew Whitaker: I completely overlooked not showing the image until i'd taken the measurements and added the class. Thanks, if you want to post that as an answer I will accept it. — jon3laze, Jan 08 '11 at 05:57

score 4 · Accepted Answer · answered Jan 08 '11 at 14:08

Try hiding the image, then take the dimensions, then show it:

var $img = $("#image");
$img.hide().removeClass("image");
var width = $img.width();
var height = $img.height();
$img.addClass("image").show();

This should remove any weird behavior you might see while adding and removing the class.

score 1 · Answer 2 · answered Jan 08 '11 at 14:13

Maybe you can clone the image (should not be extremely network-painful, because it should be cached), and get the size of the cloned one:

$newImg = $("#image").clone();
$newImg.css("display", "none").removeClass("image").appendTo("body");
var width = $newImg.width(), height = $newImg.height();
$newImg.remove();

Good luck!

use jQuery to get 'true size' of image without removing the class

2 Answers2