jcrop_api 未定义？

Posted 2023-02-25

【中文标题】jcrop_api 未定义？

【英文标题】：jcrop_api is undefined?

【发布时间】：2012-12-13 17:25:18

【问题描述】：

在 javascript 中将 Jcrop 添加到函数时，jcrop_api 变量变为未定义。当我使用 $(document).ready(function() ... ); 在窗口加载时创建 Jcrop 时，插件正在工作（包括 api） 问题是我希望用户能够保持纵横比，或者不仅仅是通过选中或取消选中复选框。所以我有以下内容：

$(document).ready(function() 
    $('#aspectratio').click(function() 
        alert(jcrop_api);
        if (!$(this).is(':checked')) 
            jcrop_api.setOptions(
                aspectRatio: 0
            );
         else 
            jcrop_api.setOptions(
                aspectRatio: 31 / 12
            );
        
    );


function stopUpload(success, newfile) 
    $('#target').attr('src', newfile);
    $('#preview').attr('src', newfile);
    $('#myfile').val('');
    $('#options').css('display', 'block');
    $('#target').Jcrop(
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 31 / 12
    , function() 
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        var jcrop_api = this;
    );

我见过其他答案，例如以下列方式调用 Jcrop：

$.Jcrop($('#cropbox_full'));

出于某种原因，在执行此操作时，jcrop 框根本不会出现。很奇怪。所以基本上，我的问题是，我做错了什么，我该如何解决这个问题（以类似于上面的方式），以便我可以通过单击复选框来更改 aspectRatio？

【参考方案1】：

好的，很简单...变量 (jcrop_api) 只是在函数中设置，因此无法从函数外部访问。我通过将其设置为全局变量来解决此问题。我不知道这是否是不好的做法，但如果有人有更好的解决方案，我很乐意听到。

【讨论】：

我正在使用 $('#cropbox').Jcrop();在函数内部，但我收到错误消息“未捕获的类型错误：对象 [对象对象] 没有方法 'Jcrop'”，那么如何将其设置为全局变量，以便在函数内部可以访问 Jcrop 函数？

@lemarc 问题可能是 jQuery 冲突，也可能是您调用 javascript 文件的顺序。确保在调用 jCrop 之前调用 jQuery。

发生在我身上并且您的解决方案有效。我假设是因为它是在匿名函数中设置的。

【参考方案2】：

jcrop_api需要先定义，这里总结一下如何定义jcrop_api变量

var jcrop_api;
var cWidth = 100;
var cHeight = 100;

jQuery(function($)

  // initialize jcrop
  jcrop_api = $.Jcrop('#target');

  // set the selection area
  jcrop_api.animateTo([0,0,cWidth,cHeight]);

);

在正文部分图片标签

<img src="demo_files/sago.jpg" id="target"  />