jQuery jcrop 插件：如何发布？

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

试试这个：

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
  });
});

Answer 2

您无法通过这种方式获取 API。试试这个：

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

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