未调用来自 jcrop 的回调答案

【问题标题】：Callback from jcrop not being called未调用来自 jcrop 的回调
【发布时间】：2012-04-17 18:40:37
【问题描述】：

我正在使用最新版本的 jquery.jcrop。在图像上调用 jcrop() 时，裁剪工作但不会调用回调。这使得无法设置 jcrop_api 以供以后使用。具体来说，我希望能够更改图像并需要 destroy() 方法。

function setJCrop() {
    //Set image for cropping
    jQuery('#preview').Jcrop( {
        minSize : [126, 126],
        setSelect : [ 0, 0, 126, 126 ],
        //onChange: updateMeasurements,
        onSelect: updateMeasurements,
        aspectRatio: 1
    }, function() {
        jcrop_api = this;  //callback not being called
    } );
}

当切换到 jQuery 就绪函数的这个调用时开始发生这种情况：

jQuery(document).ready(function($) {

【问题讨论】：

标签： jquery jcrop

【解决方案1】：

贾斯汀的代码几乎就是文档所说的。但是，当您使用 IE6、7、8 中的 API 重新加载图像时，它会执行一次然后跌倒。为什么？因为IE有问题。

更兼容的启动API的方式应该是这样。

在脚本的最外层定义您的 api。

var jcrop_api;

然后当你需要启动 API 时，例如在同一页面上上传之后.. 你这样做（这行是让 IE 和其他奇怪的浏览器开心的原因）我使用两个标签，因为有时我的裁剪器用于一个母版页，我只留下它作为示例。我也没有设置任何选项，但如果你愿意，你可以。

jcrop_api = $.Jcrop($('#SourceImage, #body_SourceImage'), {});

然后你可以为每张图片启动裁剪器

       jcrop_api.setOptions({
            boxWidth: 500,
            onSelect: updateCoords,
            minSize: [thisImage.Min.Width, thisImage.Min.Height],
            aspectRatio: thisImage.AspectRatio  //1.3 for example
        });
        jcrop_api.setImage(uploadLocation + fileName);

重要的是，当您完成裁剪后，您必须销毁 API，然后重新启动它。再次 - 只是为了让所有浏览器都满意。

 jcrop_api.destroy();

【讨论】：

好建议。很抱歉这么久才回来。
@ppumkin : 你能给我们一个 jsfiddle 链接吗？
@Persian。你的IE有问题吗？只需将 var jcrop_api 移动到全局命名空间中即可。
我也有同样的情况，但无法调整大图大小Jcrop.load('target').then(img => { jcp = Jcrop.attach(img, { multi: true }); Jcrop.setOptions({ boxWidth: 500, minSize: [200, 300], }); });

【解决方案2】：

确保首先在 Jcrop 调用范围之外声明 jcrop_api 变量，就像这样。列出的代码只会分配一个变量。如果您仍然怀疑回调正在执行，请将alert() 放在那里进行测试。

var jcrop_api;

function setJCrop() {
    //Set image for cropping
    $('#preview').Jcrop( {
        minSize : [126, 126],
        setSelect : [ 0, 0, 126, 126 ],
        //onChange: updateMeasurements,
        onSelect: updateMeasurements,
        aspectRatio: 1
    },function(){
      jcrop_api = this;
    } );
}

【讨论】：