javascript - 如何重置 Jcrop 插件？即如何允许更改目标图像的来源？

Question

我正在开发的应用程序允许用户将无限数量的图像添加到视口中。对于这些图像，允许进行一系列操作：调整大小、拖动、旋转和裁剪。对于裁剪功能，我使用的是Jcrop插件。

当点击裁剪的控件图标时，会出现一个灯箱，显示选中的图像（<img>元素都是一样的，只是src属性值每次都会改变）并允许用户裁剪它。单击裁剪图标时触发的关联事件处理程序是：

$(document).on("click", "div.cropper", function(){

            var ctrl = $(this),
                ref = ctrl.attr("reference"),
                obj = returnObj(objects,ref),
                target = $("#crop-target")
                crop_params = {};

            target.attr("src",obj.src);
            target.Jcrop({
                onSelect: function(c){
                    crop_params = c;
                }
            });
});

鉴于上面的代码，裁剪工作完美，但仅适用于我尝试的第一张图像。之后，当我单击任何其他图像的“裁剪器”图标时，将显示第一张图像。

我该如何解决这个问题？

PS：我已经搜索了关于 Jcrop 的现有问题，但找不到我的特定问题的答案。

Answer 1

您只需要创建一个新的 img 标签并以此启动 jCrop。

$('#parent_tag #img_to_crop').remove();
$('#parent_tag').html('<img id="img_to_crop"></img>');
$('#parent_tag #img_to_crop').Jcrop({ options ... });