为啥jCrop 0.9.12版本会在选择区域的左上角产生一个小黑框？

Posted 2023-02-25

【中文标题】为啥jCrop 0.9.12版本会在选择区域的左上角产生一个小黑框？

【英文标题】：Why does version 0.9.12 of jCrop produce a small black box in the upper left corner of selection area?为什么jCrop 0.9.12版本会在选择区域的左上角产生一个小黑框？

【发布时间】：2013-04-08 03:33:08

【问题描述】：

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

html：

<img id="cropbox" src="image/path" >
<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>

jquery：

<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 度）。但是，如果我单击并“向下”拖动黑框，则不会发生这种情况。

【问题讨论】：

您在哪些浏览器中看到此行为？是否有 JS 错误返回到控制台？

之前应该问过这个，jQuery的哪个版本？

jQuery 1.9 版。当我进行升级时，我注意到 jCrop 不再工作了。 jCrop 网页显示我需要升级到 jCrop 版本 0.9.12。升级后，我能够让 jCrop 部分工作，但右上角有灰色框，并且无法调整选择区域的大小。

有没有机会创建一个重复 yoru 问题的jsfiddle.net？我无法让它重复这个问题。

您找到解决此问题的方法了吗？我们也看到了。

【参考方案1】：

我遇到了同样的问题，我花了一段时间才弄清楚发生了什么。在 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 文件来替换您现有的文件。当然，在测试之前清除缓存（我忘了这样做，又花了十分钟没有结果）。

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