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 ... });

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

1 个答案: