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