javascript - jquery - 当我的模态窗口关闭时从图像中删除图像区域选择

Question

我正在使用 jquery 插件“图像区域选择” http://odyniec.net/projects/imgareaselect/来裁剪用户上传的图像。

当用户上传图像文件时，我用来上传文件的 php 返回服务器上的文件位置并触发模式窗口。对于这个模态窗口，我使用 .prepend 将图像添加到 #myModal，如下所示：

$('#myModal').prepend('<img id="photo" src="../'+success+'" />');

然后我将图像区域选择代码附加到这个上传的图像。

$('#photo').imgAreaSelect({aspectRatio: '1:1', handles: true, fadeSpeed: 200,  onSelectChange: preview});

我的问题是，如果使用 imgAreaSelect 选择图像的一个区域，然后单击以关闭模态窗口，模态将消失，但图像的轮廓加上裁剪手柄仍然存在！

在关闭我的模态窗口的javascript中，我尝试添加：

$('#photo').imgAreaSelect('');

分离 imgAreaSelect 但那和其他变体不起作用。有人对如何解决这个问题有任何想法吗？

score 0 · Accepted Answer

从文档中：

选项

remove 如果设置为 true，则插件将被完全删除。

所以我们假设它是

$("#photo").imgAreaSelect({remove:true});

编辑：试试这个：

var myCroppable = $('#photo').imgAreaSelect({aspectRatio: '1:1', handles: true, fadeSpeed: 200,  onSelectChange: preview});

无论你现在打电话给你的地方imgAreaSelect。现在你有了它的一个实例。然后在关闭按钮或保存缩略图按钮处执行以下操作：

myCroppable.cancelSelection();

那应该行得通。

score 0 · Accepted Answer

试试这个：

$('#photo').imgAreaSelect({disable:true,hide:true});

2 回答 2