JCrop调整图像大小而不是裁剪 - Javascript

Question

我正在尝试使用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;
};

然而，这就是：

我尝试过很多方法来解决这个问题，但最终的结果总是一样的。有人有主意吗？感谢。

Answer 1

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

在我的css文件中，我有这段代码：

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

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

Answer 2

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

Answer 3

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