JCrop 剪切图像边缘答案

【问题标题】：JCrop cuts edge of imageJCrop 剪切图像边缘
【发布时间】：2013-09-30 09:30:41
【问题描述】：

我正在使用jCrop 创建一个界面，允许用户将图像裁剪为固定的宽度和高度。它显示原始图像（始终为 940 像素宽度，高度可变）并覆盖顶部的 jCrop 选择器，具有固定的宽度和高度 (940 x 600)。然后用户可以上下移动选择器（不是左右移动，因为选择器与原始图像的宽度相同）并选择一部分。裁剪工作正常，除了一件事：原始的预裁剪图像（在其上显示 jCrop 选择器）从左侧丢失了几个像素——它更像是 935px 宽。因此，当 jCrop 裁剪它时，结果是左边缘的黑色细边框。代码：

<script language="Javascript">
  jQuery(function($) {      

    $('#target').Jcrop({
      keySupport: false,
      minSize: [940,600],
      maxSize: [940,600],           
      setSelect: [0,0,940,600],
      onSelect: updateCoords
    });

    function updateCoords(c)
    {
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

  });
</script>

<img src="carousel.jpg" id="target" border="0" width="940" />

<form action="crop" method="post">
  <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="submit" value="Crop Image" />                            
</form>

非常感谢任何想法。

编辑：

查看生成的源代码，我看到 jCrop 正在向显示的图像添加样式“width:935px”。但为什么呢？

<img style="display: none; visibility: hidden; width: 935px; height: 701px;" src="carousel.jpg" id="target" border="0" width="940">
<div class="jcrop-holder" style="width: 935px; height: 701px; position: relative; background-color: black;">
<div style="position: absolute; z-index: 600; width: 940px; height: 600px; top: 0px; left: -5px;">
<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
<img style="border: medium none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 5px; width: 935px; height: 701px;" src="carousel.jpg">

编辑 2：

我正在使用 Twitter Bootstrap。我从this jCrop issue 看到有冲突，但那里描述的问题与我的不同，我尝试了他们建议的 max-width:none 解决方案，但无济于事。

【问题讨论】：

标签： jquery image crop jcrop

【解决方案1】：

我最后通过将要裁剪的图像放入 a 并将其及其子图像的样式设置为“width:940px”来修复它。

没查出问题的原因，可能是和Bootstrap冲突。

【讨论】：