How do I remove jcrop?

Justin808 picture Justin808 · Dec 17, 2010 · Viewed 26.8k times · Source

how do i un-jcrop an image?

I'm adding jcrop with a;

$('#imgThumbnailer').Jcrop({
    onChange: statusCrop,
    onSelect: statusCrop,
    bgColor: 'black',
    bgOpacity: .3
});

How do I go about undoing it?

Edit:

$('#imgThumbnailer').attr("src", $obj.attr('thumbnailer_link'));

var dlg = $("#ThumbnailDialog").dialog({
    modal: false,
    draggable: false,
    position: 'center',
    zIndex: 99999,  // Above the overlay
    closeText: '',
    width: 510,
    height: 500,
    open: function () {
        $('body').css("overflow", "hidden");
        if ($.browser.msie) {
            $('html').css("overflow", "hidden");
        }
        $("#loader").show();

        var ratio = parseFloat($obj.attr('thumbnailer_ratio'));
        jcrop_api = $.Jcrop('#imgThumbnailer', {
            onChange: statusCrop,
            onSelect: statusCrop,
            bgColor: 'black',
            bgOpacity: .3,
            aspectRatio: ratio
        });

    },
    close: function () { $('body').css("overflow", "auto"); if ($.browser.msie) { $('html').css("overflow", "auto"); } $("#loader").hide(); },
    buttons: {
        'Set Thumbnail': function () {
            $(this).dialog('close');
        },
        Cancel: function () {
            jcrop_api.destroy();
            jcrop_api = null;
            $(this).dialog('close');
        }
    }
}).parent();
dlg.appendTo(jQuery('form:first'));

The above code will not work for me. I think this has to do wth the fact that Im using this within a jquery dialog. http://code.google.com/p/jcrop/issues/detail?id=21

Not sure exactly how to go about fixing it.

Answer

foob picture foob · Feb 20, 2011

I was wondering the same thing and after reading the source have found a simple solution that works in v0.9.8 (the other posted answers only work with the dev version currently). If you initiate Jcrop like this:

$('#imgThumbnailer').Jcrop({
    onChange: statusCrop,
    onSelect: statusCrop,
    bgColor: 'black',
    bgOpacity: .3
});

then you can get access to the api and destroy Jcrop via:

JcropAPI = $('#imgThumbnailer').data('Jcrop');
JcropAPI.destroy();

It's probably too late for the asker but hopefully this is helpful to someone who stumbles upon this page from google!