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

Posted 2023-02-25

【中文标题】如何重置 Jcrop 插件？ IE。如何允许更改目标图像的来源？

【英文标题】：How to reset the Jcrop plugin? I.e. How to allow changing the source of the target image?

【发布时间】：2012-09-28 11:32:40

【问题描述】：

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

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

$(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 的现有问题，但找不到特定问题的答案。

【问题讨论】：

我可以知道 returnObj 是做什么的，什么是参考？

您需要在 onClick 事件上重置您的坐标。或者只是删除 jCrop 并再次初始化。看到这个帖子***.com/questions/4466333/how-do-i-remove-jcrop

@Sandy 看来我完全错过了你在搜索时给我链接的帖子。 foob 的回答是我问题的完美解决方案。非常非常感谢你，桑迪！

【参考方案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 ... );