When it disappears, the coords all point to a single bottom-left corner.

A small problem, though… If you set the allowSelect to be false and the user clicks once on the resizing area (either the handles or on the sides of the crop area) and don’t resize it - literally just a click - then the crop area will disappear and they’d need to reload the page to get it back.

Now, you may have that image in your cache, but there is still a trip to the server to find that out.

As for your last question, yes, taking the width and height from $origimg works. I just set $img dimensions to $origimg dimensions after the clone():

$img.height($origimg.height());

However, I still don’t like the $origimg.hide() method, because it causes a flicker while the original is hidden and the new is loading.

$img.load(function() {console.log(”Loaded!” + $img.height())});

right before

$origimg.after($img).hide();

when you clone(), you’ve created a copy of the dom objects in memory, but when you insert $img back into the page with the line:

$origimg.after($img).hide();

the html is reloaded, along with the image, i.e. the image actually loads again from the server.

So when you reference $img.height() two lines down, the image hasn’t finished loading and isn’t properly in the dom yet, so height returns 0.

I’ve solved it temporarily by going back to the last method of wraping $img with $div, although that creates problems for your destroy() function, which i solved somewhat along these lines:

$test = $(’div.’ + cssClass(’holder’));
$img.css({ position: ‘relative’ });
$test.after($img);
$test.remove();

which is certainly not optimal, but does the trick for me, and i’m not really using destroy() anyways, but disable() enable() are very useful thanks :)

-Dan

Try placing the invocation within $(window).load(…) instead of the typical DOM-ready handler. Does that fix the issue?