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

removing image area select from an image when my modal window closes

本文关键字：图像 删除 选择 区域 模态 我的 窗口      更新时间：2023-09-26

我使用jquery插件'image areaselect ' 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，但是这个和其他变量都不起作用。有人知道怎么解决这个问题吗?

试试这个:

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

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

来自文档:

选择

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

所以我们假设它是

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

编辑:试试这个:

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

到你现在呼叫imgAreaSelect的任何地方。现在您有了它的一个实例。然后在Close按钮或Save thumbnail按钮上执行以下操作:

myCroppable.cancelSelection();

应该可以。

相关文章：