Question

我正在使用辉煌的jcrop plugin来实现图像裁剪。

然而，有一个问题。我希望用户选择一个区域，然后看到一个对话框。当他们在对话框中输入内容并单击“确定”时，我希望他们返回到未选中任何内容的图像。

这是我的代码：

jQuery(window).load(function(){
    var jcrop_api = $.Jcrop('#cropbox',{
        boxWidth: 1400,
        onSelect: showAlert
    });
});
function showAlert(c)
{
    var structidx = prompt("Enter number here: ", "");
    if (structidx!=null && structidx!="") {
                // TODO: some handling here
        alert("Entry has been saved");
        jcrop_api.release();
    } else {
        jcrop_api.release();            
    }
};

但是，使用此功能，当用户在提示符上单击“确定”或“取消”时，它们将返回仍在“主动选择”的图像。当他们移动鼠标时，它会继续选择 - 他们无法选择新区域。哪个感觉坏了。

我认为这是一个javascript流问题 - showAlert正在退出并返回浏览器之前的状态，即选择了一个区域 - 但我不知道如何绕过它。

谢谢！

Answer 1

你无法以这种方式获取API。试试这个：

$(window).load(function(){
  var jcrop_api = $.Jcrop('#cropbox',{...});
});

另请注意，如果引用函数引用它们，则需要在与jcrop_api变量相同的范围内声明它们。在您的示例代码中并非如此。

Answer 2

试试这个：

jQuery(window).load(function () {
  // function definition first
  function showAlert(c) {
    var structidx = prompt("Enter number here: ", "");
    if (structidx!=null && structidx!="") {
      // TODO: some handling here
      alert("Entry has been saved");
    }
    jcrop_api.release();
  }

  // make a global variable by leaving off the "var" keyword
  jcrop_api = $.Jcrop('#cropbox',{
    boxWidth: 1400,
    onSelect: showAlert
  });
});

jQuery jcrop插件：如何发布？

2 个答案: