I have a profile picture system which allows image cropping using jCrop. I've noticed if the user goes through the process a few times, the crop dimensions are not calculated properly simply because the previous image is still there. I've tried the destroy() method from the API , but that doesn't clear the image source from the .jcrop-holder div and its child image element.
How can I get rid of this easily? Thanks.
I have a profile picture system which allows image cropping using jCrop. I've noticed if the user goes through the process a few times, the crop dimensions are not calculated properly simply because the previous image is still there. I've tried the destroy() method from the API , but that doesn't clear the image source from the .jcrop-holder div and its child image element.
How can I get rid of this easily? Thanks.
Share Improve this question edited Mar 1, 2013 at 18:00 Paul Sweatte 24.6k7 gold badges131 silver badges268 bronze badges asked Sep 4, 2012 at 5:39 williamsandonzwilliamsandonz 16.5k23 gold badges107 silver badges190 bronze badges 3- 1 Could you post a fiddle? – Nicodemeus Commented Sep 11, 2012 at 17:49
- Sorry, we can't help you with this, if you do not provide more information. – yunzen Commented Sep 12, 2012 at 14:27
- @Baconbeastnz What changes were made in the most recent versions of JCrop? – Paul Sweatte Commented Sep 26, 2012 at 18:30
2 Answers
Reset to default 3Making some huge assumptions about your situation, I've decided that you might try something like this: $(function(){$('.jcrop-holder').removeAttr("style");});
If that's not what you need, you oughtta give us some more info!
I had a similar issue with an old version of jCrop and created a custom destroy function. Here is the gist of it:
function crop_reset()
{
//Reset coordinates of thumbnail preview container
$('#crop_preview').data("coords.x", 0);
$('#crop_preview').data("coords.y", 0);
$('#crop_preview').data("coords.w", 0);
$('#crop_preview').data("coords.h", 0);
//Reset src of jcrop img and copies bound to page specific full size and preview divs
$("#crop, #crop_preview, .jcrop-holder img").attr("src", "");
}
function crop_start()
{
//Initialize and remove previous jCrop containers using load event callback
$('#crop').Jcrop({
onChange: showPreview,
onSelect: showPreview,
onLoad: hidePreview,
aspectRatio: 1,
setSelect: [0, 0, 50, 50],
minSize: [50, 50],
allowResize: false,
allowMove: true
},function(){$(".jcrop-holder").not(":last").remove();});
//Remove previous jCrop containers using timer if callback is not supported
/*
window.setTimeout(function noblank(){
$(".jcrop-holder").not(":last").remove();
}, 1000);
*/
}