jQuery jcrop 插件：如何发布？

Posted 2023-02-25

【中文标题】jQuery jcrop 插件：如何发布？

【英文标题】：jQuery jcrop plugin: how to release?

【发布时间】：2011-01-11 20:11:03

【问题描述】：

我正在使用出色的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 正在退出并将我返回到浏览器的先前状态，即选择了一个区域 - 但我不知道如何绕过它。

谢谢！

【参考方案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
  );
);

【讨论】：

@UtsavUpadhyay 此线程已有十多年（！）的历史。请改为提出新问题。

【参考方案2】：

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

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

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

【讨论】：

作为 Jcrop 的作者，我可以向您保证这是正确的代码。鉴于您的原始示例，我怀疑您的问题可能是变量范围。 Tomalak 重新陈述了我所描述的完整代码结构。

是的，该代码修复了它，谢谢！这确实是我的变量范围。