2

我在 jcrop 中使用了以下脚本，在升级到 0.9.12 版本之前没有任何问题。现在，选择区域的左上角有一个小黑框。当我进行选择时，我无法抓住角落或边来调整我的选择。我需要做什么才能使其与新版本一起使用？

HTML：

<img id="cropbox" src="image/path" alt="image">
<form class="margin_top_10" action="my_file.php" method="post" onsubmit="return checkCoords();">
    <input type="hidden" id="x" name="x">
    <input type="hidden" id="y" name="y">
    <input type="hidden" id="w" name="w">
    <input type="hidden" id="h" name="h">
    <input type="hidden" id="pic_to_crop" name="pic_to_crop" value="some value">
    <input type="submit" name="submit" id="submit" value="Crop Image">
</form>

查询：

<script type="text/javascript">

$(function(){
    $('#cropbox').Jcrop({
        aspectRatio: 1.5,
        onSelect: updateCoords, 
        setSelect:   [ 100, 100, 50, 50 ]
    });
});
function updateCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
function checkCoords()
{
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};
</script>

在此处输入图像描述

我可以单击所选区域内的任意位置并在图像周围拖动选择，但是如您所见，我无法拉伸选择区域（除非我单击并拖动黑框）。此外，当我单击并“向上”拖动小黑框时，选择区域突然翻转（即，它围绕 x 轴旋转 180 度）。但是，如果我单击并“向下”拖动黑框，则不会发生这种情况。

4

1 回答 1

2

我遇到了同样的问题，我花了一段时间才弄清楚发生了什么。在 0.9.12 版本中，jcrop 切换到使用 .css 文件来定义用于调整大小的句柄的位置，而不是在 .js 文件中设置它们。一旦我意识到这一点，快速检查我的 jquery.Jcrop.css 文件就会发现它不是最新的。特别是，缺少一个包含如下设置的部分：

.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}

每个句柄 (n,e,s,w,ne,nw,se,sw) 都有一个这样的条目，如果没有这些，所有句柄的位置将默认为 0,0。如果你还没有，我建议你去这里：

https://github.com/tapmodo/Jcrop/tree/master/css

并获取最新的 .css 文件来替换您现有的文件。当然，在测试之前清除缓存（我忘了这样做又花了十分钟没有结果）。

真的希望这可以帮助其他看到这个问题的人。

于 2014-04-04T17:59:47.037 回答