jquery - jcrop 的回调未被调用

Question

我正在使用最新版本的 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($) {

Answer 1

Justin 的代码与文档中的内容基本一致。但是，当您使用 IE6、7、8 中的 API 重新编辑图像时，它会执行一次然后失败。为什么？因为 IE 有问题。

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

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

var jcrop_api;

然后，当你需要启动 API 时，例如在同一页面上上传后..你这样做(这行是让 IE 和其他奇怪的浏览器满意的)我使用两个标签，因为有时我的cropper被使用一个母版页，我仅将其留作示例。另外，我没有设置任何选项，但如果你愿意，你可以设置。

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