JCrop attaches height and width to the original image tag, but doesn't remove them upon destruction

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Open JCrop on an image 
2. Replace the image source in the DOM via JavaScript with an image of a 
different size
3. Call destroy()
3. Open JCrop on the updated image

What is the expected output? What do you see instead?
You'll see that the image is now stretched to the dimensions of the previous 
image.

What version of the product are you using? On what operating system?
0.9.1

Please provide any additional information below.
The reason this happens is because when JCrop is first initialized, it attaches 
height and width attributes to the <img/> tag that you initialize it with.  
However, after calling destroy(), the height and width attributes are still 
present, so you can't just update the source and open JCrop again.  The fix 
would be to remove the height and width attributes (or reset them to their 
original values) in the destroy() method.

Original issue reported on code.google.com by whardwic...@gmail.com on 21 May 2012 at 8:57

[GoogleCodeExporter]

I get slightly different behaviour (also with v0.9.10), but for the same reason 
- the destroy() API method is not cleaning up the inline style attributes it 
adds to the original image element. However, unlike the original reporter of 
this bug, I am finding that, because of a visibility:hidden rule, the image 
effectively disappears on execution of the destroy method. This can be seen in 
the API demo / tutorial 5 of the current Jcrop download. The image disappears 
on destroy(), and only reappears when the "re-attach Jcrop" button is pressed.

Original comment by b...@aramando.net on 28 May 2012 at 10:20

[GoogleCodeExporter]

I'm having the same issue.
In my page the user can select which image to crop from a list, which loads the 
cropper tool in an overlay. The initial crop works fine, but subsequent crops 
will use the same dimensions of the original image. I'm also using destroy() 
before creating the new crop.

Is there a patch, or way around this?

Original comment by j...@wearegrand.com on 7 Jun 2012 at 10:02

[GoogleCodeExporter]

I found away around this by using the API and calling setImage(src).

if (typeof(api) != "undefined") {
        api.destroy();
}

api = $.Jcrop('#img');
api.setImage(src);
api.setOptions({
    onChange : showCoords,
    onSelect : showCoords,
    bgOpacity :   .4,
    aspectRatio : 16 / 9,
    trueSize : [ width, height ],
    minSize : [ 160, 90 ],
    setSelect : selection
    });
api.focus();

It isn't as smooth as before, but it works.

Original comment by j...@wearegrand.com on 8 Jun 2012 at 2:51

[GoogleCodeExporter]

My work-around was to remove the <img> tag from the DOM and re-add it, before 
re-initializing jCrop:

$('#cropImage').replaceWith('<img id="cropImage" src="' + source + '"/>');

$('#cropImage').Jcrop({...});

Original comment by whardwic...@gmail.com on 8 Jun 2012 at 3:50

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Added this issue to GitHub, located here:

https://github.com/tapmodo/Jcrop/issues/46

Original comment by whardwic...@gmail.com on 14 Jun 2012 at 6:28

[GoogleCodeExporter]

                        var jcrop_api;
                        $().ready(function () {
                            initJcrop();
                            function initJcrop() {
                                jcrop_api = $.Jcrop('#imgUploadedImage', { 
                                onChange: setCoords,
                                onSelect: setCoords,
                                aspectRatio: 1,
                                setSelect: [20, 20, 140, 140]});

                            };
                        });

                       //Then setImage with your image src, as my                imageHandler + response.Id is image src

                        jcrop_api.setImage(imageHandler + response.Id);

//As the setImage is creating new img include height and width, so everytime u 
run the code will generate new image which is not nice looking. Now u need to 
remove the old image and generate new image. 

$('.jcrop-holder').remove();
You can paste to your crop button so it is remove old image.

Original comment by andrewhi...@hotmail.com on 7 Aug 2012 at 9:51

[GoogleCodeExporter]

Removing the style attribute from my jcrop item worked perfectly.
Maybe a good idea to include that in the destroy method?

Original comment by stijn.de...@ideamovers.eu on 26 Mar 2013 at 3:54

[GoogleCodeExporter]

The replaceWith() method works with Firefox, but not Chrome. Looks like it's a 
Chrome bug.

Original comment by min...@gmail.com on 27 Jul 2013 at 1:32

[GoogleCodeExporter]

in my case this has worked well

$(oImage).attr('style','');
jcrop_api.destroy();

where oImage is "img.preview"

Original comment by giancarl...@gmail.com on 31 Jul 2013 at 2:59

[GoogleCodeExporter]

The problems routs goes back to style of jcrop. jcrop tries to give style to 
image, and if you have assigned your <img> element to a css class before (or 
having style attributes) then jCrop will be conflicting with that. remove all 
the styles and etc of your <img> element (check your css file of your page 
also) and try to change the style (if you don't like its default) in 
"jqueryjcrop.css" which you supposed have it already in your machine installed 
with all jcrop necessary files.

Original comment by sina.naz...@gmail.com on 30 Aug 2013 at 12:37