How do I remove jcrop?

Question

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.

Samphire

Answer 1

Edit: Looks like you need to maintain a reference to the api when you add jcrop to an image.

// assign jcrop to jcrop_api
var jcrop_api = $.Jcrop('#imgThumbnailer', {
    onChange: statusCrop,
    onSelect: statusCrop,
    bgColor: 'black',
    bgOpacity: .3
});


// when you want to remove it
jcrop_api.destroy();

Climatology

When i initialize jcrop that way, it doesn't initialize :-/ – Samphire

is too short: I've put the code above. I believe its a bug in jcrop. @Jeff the Bear: No error. all the JCrop divs are set to 0px height and width with display: none. – Samphire

This works. i had to upgrade jcrop to the latest developer version – Samphire

Answer 2

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!

Injustice

Indeed, this was heaps useful for me. Thanks for sharing! – Pliers

This stopped me from pulling my hair out. Thank you for that bit. – Jestude

In particular, there seems to be some interaction with jQuery UI Dialog which means this way is the way to go even now the release version is up to 0.9.10. – Befog

Exactly what I've wasted a whole day looking for! Thank you so much, @foob! – Variolous

Remember folks this can be shortened to $('#imgThumbnailer').data('Jcrop').destroy() – Mussolini

Answer 3

As of version v0.9.9 of Jcrop, you need to do it the following way:

var jcrop_api;
$('#target').Jcrop(options,function(){
    jcrop_api = this;
});

Courtesy of the creator: http://deepliquid.com/content/Jcrop_API.html

Delfinadelfine