jquery - 尝试使用 Jcrop api

Question

我正在使用 Jcrop，我不想根据用户输入动态更改选择的纵横比，所以我想要走的路是使用 Jcrop api。

问题是，如果我将它用作 jquery 函数，它可以正常工作：

$('#cropbox_full').Jcrop({
  onChange: update_full_dimensions,
  onSelect: update_full_dimensions
});

但是，如果我使用它调用 Jcrop 函数，我的图像将不再显示：

var api = $.Jcrop('#cropbox_full', options);

它是一个 Jcrop 错误吗？

顺便说一句，我正在使用 chrome 和 jquery 1.4.2

Answer 1

这可能是 JCrop 中的一个错误，但您可以以适用于 Google Chrome、FF、IE 和 Safari 的方式编写代码。为此，而不是：

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

使用这样的东西：

        $(document).ready(function () {
            $('#cropbox_full').Jcrop({
                onSelect: storeCoords,
                setSelect: [0, 0, 114, 137],
                aspectRatio: 114 / 137,
                minSize: [114, 137]
            });
        });

Answer 2

使用 chrome 时似乎存在一些错误，因为在 Firefox 中这有效：

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

设置 jCrop 后，可以像这样访问它并且可以重置选项，这适用于 chrome：

$('#cropbox_full').Jcrop(options);
var jcrop = $('#cropbox_full').data('Jcrop');
jcrop.setOptions(newOptions);

Answer 3

我今天遇到了类似的问题。我通过初始化 Jcrop api 解决了这个问题

$(window).load(function() { ... });

代替

$(document).ready(function() { ... });

这是jQuery中的常见做法。

Answer 4

如果您$.Jcrop()直接使用，则需要一个 jquery 对象或元素。

使用示例如下所示：

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