0

我正在开发的应用程序允许用户将无限数量的图像添加到视口中。对于这些图像,允许进行一系列操作:调整大小拖动旋转裁剪。对于裁剪功能,我使用的是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 的现有问题,但找不到我的特定问题的答案。

4

1 回答 1

0

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

$('#parent_tag #img_to_crop').remove();
$('#parent_tag').html('<img id="img_to_crop"></img>');
$('#parent_tag #img_to_crop').Jcrop({ options ... });
于 2016-04-07T16:48:43.517 回答