如何移除 jcrop？

Question

如何取消图片的jcrop效果？

我在代码中使用了jcrop；

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

我该如何撤销它？

编辑：

$('#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'));

上述代码对我不起作用。我认为这与我在jQuery对话框中使用有关。http://code.google.com/p/jcrop/issues/detail?id=21

不确定如何解决。

- Justin808

Answer 1

我也曾思考同样的问题，阅读了源代码后发现一个简单的解决方案，在v0.9.8中有效（其他发布的答案目前只适用于开发版本）。如果你以以下方式初始化Jcrop：

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

然后，您可以通过以下方式访问API并销毁Jcrop：

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

对于提问者来说可能已经太晚了，但希望这对从谷歌搜索到此页面的其他人有所帮助！

- foob

---

确实，这对我非常有用。谢谢分享！ - David Hedlund

这使我不再想把头发都拔掉了。谢谢你提供的建议。 - yaegerbomb

特别是，似乎与jQuery UI对话框有一些交互作用，这意味着即使现在发布版本已经更新到“0.9.10”，这种方式仍然是正确的选择。 - AakashM

这正是我浪费了一整天时间寻找的东西！非常感谢，@foob！ - Andrei Oniga

记住，这可以缩短为$('#imgThumbnailer').data('Jcrop').destroy()。 - Ukuser32

Answer 2

编辑: 看起来当你把jcrop添加到图片上时需要保持对api的引用。

// 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();

- Jeff the Bear

---

当我以那种方式初始化jcrop时，它不会初始化 :-/ - Justin808

代码太短了：我已经放置了上面的代码。我相信这是JCrop中的一个错误。 @Jeff the Bear：没有错误。所有的JCrop div都被设置为0像素的高度和宽度，并且使用display: none隐藏。 - Justin808

这个可以。我不得不升级jcrop到最新的开发者版本。 - Justin808

Answer 3

截至Jcrop的v0.9.9版本，您需要按照以下方式操作：

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

创作者提供： http://deepliquid.com/content/Jcrop_API.html

该链接提供了Jcrop API的相关内容。

- Jan