JCrop调整不裁剪图像 - 的JavaScript(JCrop resizing the imag

我试图用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的引导模式被重写JCrop CSS里面的CSS。 不得不修改CSS中JCrop到没有这种情况发生。

Answer 3:

按照Jcrop文档，它实际上并没有做修剪。 它只是创建了一个图像裁剪UI。 然后，它取决于服务器做实际的裁剪上; 看到http://deepliquid.com/content/Jcrop_Implementation_Theory.html 。 所以它看起来像插件是做什么它是专门做。 它现在离开，其余为你做你自己的服务器上，因为它们显示出来。

文章来源: JCrop resizing the image not cropping - Javascript