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

我正在尝试使用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 = cx; y = cy; w = cw; h = ch; }; 

然而，这是发生的事情：

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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