我正在使用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 引导程序。我从这个 jCrop 问题中看到存在冲突,但那里描述的问题与我的不同,我尝试了他们建议的 max-width:none 解决方案,但无济于事。