JCrop 调整图像大小不裁剪 - Javascript答案

【问题标题】：JCrop resizing the image not cropping - JavascriptJCrop 调整图像大小不裁剪 - Javascript
【发布时间】：2012-05-19 07:39:15
【问题描述】：

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

然而，事情是这样的：

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

【问题讨论】：

你能发布你的函数setCoords的源代码吗？

标签： javascript jquery web jcrop

【解决方案1】：

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

【讨论】：

保存图像不是问题。裁剪工具是问题所在。我可以用坐标保存图像。我不理解它不适用于给定图像的事实。我不确定为什么它会变形给定的图像而不是显示图像的裁剪区域。
我不确定你的代码打算做什么；快速浏览，它看起来像是发生选择或更改事件时，您立即将其重置为setCoords。 ESP Onchange - “选择移动时调用”;如果我正确地遵循，你永远不会让用户实际设置坐标，因为你会立即重置回 x = 0，y = 0，w = 0，h = 0。再次，只是一个猜测，但我认为它是然后看到一个无效的选择，只使用您的默认选择 - setSelect: [100, 100, 50, 50]。示例中对 showCoords() 的回调似乎是一个访问函数，而不是一个 setter。
由于您随后将图像尺寸设置为 160x160，因此在 100x50 的图像上，它看起来像是在 160x160 的框内将 100x50 的图像拉伸为 160x80。
旁注，我也许可以在我目前正在做的事情中使用这个插件。如果它在没有服务器运行的情况下在客户端工作，我会很高兴看到您拥有的“保存裁剪部分”代码。
我能弄明白。事实证明，twitter bootstrap modal 中的 JCrop 的 JCrop 框的宽度存在问题。 twitter 引导模式覆盖了 JCrop css 中的 CSS。不得不修改 JCrop 中的 CSS 以防止这种情况发生。就客户端工作而言，我不确定是否可以发布与工作相关的代码。我会看看我能做什么。它是 MVC3 中的 C# 代码。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

@Bungdaddy Oof，这是很久以前的事了。另一个人在这里评论了这个问题：stackoverflow.com/a/11207459/692197。他所做的听起来与我所做的完全一致。裁剪工具从模态继承 css。我认为必须删除高度和宽度才能解决 jcrop css 文件中的问题。