JCrop削减图像的边缘

我使用jCrop创建一个界面，允许用户将图像裁剪到固定的宽度和高度。它显示原始图像（始终为940px宽度，高度可变），并将jCrop选择器覆盖在顶部，具有固定的宽度和高度（940 x 600）。然后使用可以上下移动选择器（不要离开&，因为选择器的宽度与原始图像相同）并选择一个部分。裁剪工作正常，除了一件事情：原始的，预裁剪的图像（jCrop选择器显示在其上）缺少左侧的几个像素 - 它更像935像素宽。因此，当jCrop收获它时，结果是沿着左边缘有一个很薄的黑色边框。代码：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被添加风格“宽度：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的引导。我从this jCrop issue看到存在冲突，但所描述的问题与我的不一样，并且我尝试了他们所建议的最大宽度：无解决方案，但无济于事。

来源

2013-09-24 GluePear

我通过将图像裁剪成一个样式并将其子图像设置为“width：940px”来修复它。

我没有找到问题的原因是什么，也许这是与Bootstrap的冲突。

来源

2013-09-25 13:12:02 GluePear

JCrop削减图像的边缘

回答

相关问题