JCrop调整图像大小而不是裁剪 - Javascript [英] JCrop resizing the image not cropping - Javascript

问题描述

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

I am trying to use JCrop to crop an image. However the results are frustratingly wrong and I am not sure why. I have an image uploader that when someone selects in image a javascript changes the source of an image already on the page to match the newly upload image. I then have this code:

$('#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;
};

然而这就是：

我试过试过稍微解决这个问题，但最终结果总是一样的。有人有主意吗？谢谢。

I have tried tried quite a bit to fix this but the end results are ALWAYS the same. Anyone have any ideas? Thanks.

推荐答案

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

I was able to figure it out. Turns out that JCrop inside a twitter bootstrap modal has an issue with the width of the JCrop box. The twitter bootstrap modal is overriding the CSS inside the JCrop css. Had to modify the CSS in JCrop to not have this happen.

这篇关于JCrop调整图像大小而不是裁剪 - Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！