2

我正在尝试使用 JCrop 裁剪图像。然而结果是令人沮丧的错误，我不知道为什么。我有一个图片上传器，当有人在图片中选择时，javascript 会更改页面上已有图片的来源以匹配新上传的图片。然后我有这个代码：

$('#myForm').ajaxForm({
    dataType: 'json',
    success: function (result) {
        $("#image-editor-preview img")
            .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
                        .Jcrop({
                            aspectRatio: 1,
                            setSelect: [100, 100, 50, 50],
                            minSize: [160, 160],
                            maxSize: [160, 160],
                            onChange: setCoords,
                            onSelect: setCoords
                        });
    }
});

var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
    x = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};

然而，这就是发生的事情：

在此处输入图像描述

我已经尝试了很多方法来解决这个问题，但最终结果总是一样的。有人有想法么？谢谢。

4

3 回答 3

7

我有同样的问题，但我发现，为什么会这样。

在我的 css 文件中，我有以下代码：

img {
    width:  100%;
    height: auto;
    border: none;
}

当我从此定义中删除宽度和高度时，插件开始正常工作。

于 2012-06-26T12:34:49.473 回答
5

我能够弄清楚。事实证明，twitter bootstrap modal 中的 JCrop 的 JCrop 框的宽度存在问题。twitter 引导模式覆盖了 JCrop css 中的 CSS。不得不修改 JCrop 中的 CSS 以防止这种情况发生。

于 2012-07-27T17:03:17.970 回答
0

根据 Jcrop 文档，它实际上并没有进行裁剪。它只创建一个图像裁剪 UI。然后，它取决于进行实际裁剪的服务器；请参阅http://deepliquid.com/content/Jcrop_Implementation_Theory.html。所以看起来插件正在做它设计的事情。正如他们所展示的，现在剩下的事情就让你自己在服务器上做。

于 2012-05-10T23:08:50.550 回答