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但是那个和其他变种不起作用。任何有关如何解决这个问题的想法？

Answer 1

来自文档：

选

删除如果设置为true，则会完全删除插件。

所以我们假设它是

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

修改：试试这个：

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

现在，无论您何时拨打imgAreaSelect，都可以。现在你有一个它的实例。然后，您可以在“关闭”按钮或“保存Thubmnail”按钮上执行以下操作：

myCroppable.cancelSelection();

这应该有效。

Answer 2

试试这个：

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

更多选项http://odyniec.net/projects/imgareaselect/usage.html

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

2 个答案: