1

我在实施 Jcrop 时遇到了严重的麻烦。我将展示有关 Jcrop 实现的代码：

$("#crop-mini").Jcrop({
        onChange : updatePositions,
        onSelect : updatePositions,
        boxWidth : 500,
        boxHeight : 400,
        keySupport : false,
        setSelect : [0, 0, 999999, 999999],
        minSize : [10, 10]
});

其中#crop-mini 是<img>包含图像的标签。updatePositions只是一个功能......更新选择位置。很简单：

function updatePositions(coords)
{
    $(".x").val(coords.x);
    $(".y").val(coords.y);
    $(".w").val(coords.w);
    $(".h").val(coords.h);
};

我上传了一张图片，将它的 url 写入<img>标签，启动了一个 fancybox 并调用 JCrop。但是，当我调整选择框的大小时，会出现以下故障：

在此处输入图像描述

看起来所选内容显示相同的图像从位置coords.y（coords是当前选择位置）变形到coords.h+coords.y，从变形0到coords.w。如果我把选择放在左上角，你会看到整个图像。

顺便说一句，裁剪按预期工作，并且正在传递真实坐标，所以我碰巧认为问题出在演示文稿中，而不是处理中。我做错什么了吗？

4

1 回答 1

1

当您max-width在 css 中设置时会发生这种情况：

img {
    max-width: 100%
}

只需添加以下规则即可修复它：

.image-version img {
    max-width: none;
}

用 id.image-version包装的元素的 css 类在哪里。<img>#crop-mini

于 2013-02-06T14:57:12.760 回答