Jcrop处理多张图片时，尺寸不正确
Posted
技术标签:
【中文标题】Jcrop处理多张图片时，尺寸不正确【英文标题】：When Jcrop handle more than one image, the size is incorrect 【发布时间】：2016-05-04 06:25:40 【问题描述】：1,
2,
问题：我们什么时候动态改变图像？ 答：当用户异步上传图片时，比如使用ajaxfileupload.js。 当用户上传一张图片，并想上传另一张图片时。 如果他使用Jcrop，后面的图片都显示为第一张图片的大小。
即使他使用以下 jQuery 代码来更改新图像的大小，它仍然是错误的大小。 $("#target").attr("width","400"); $("#target").attr("height","250");
有谁知道如何使用 Jcrop 并以真实尺寸显示每张图片？我的意思是当图像动态更改时。
非常感谢！
源代码压缩成一个zip文件，都是字体端代码，解压后可以打开，请打开“crop.html”
您可以在此处下载 zip 文件 (214KB)： download
“crop.html”的内容是：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($)
var jcrop_api;
initJcrop();
$('#coords').on('change', 'input', function(e)
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1, y1, x2, y2]);
);
function initJcrop()
$('#target').Jcrop(
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
, function()
jcrop_api = this;
);
;
$('#changeToWiderPicture').click(function(e)
jcrop_api.destroy();
$("#target").attr("src", "img/2.jpg");
$("#target").attr("width", "400");
$("#target").attr("height", "250");
$("#normalPicture").attr("src", "img/2.jpg");
$("#normanPicureIntroduction").html("Original picure:400X250");
$('#changeToWiderPicture').hide();
$('#changeBack').show();
initJcrop();
return false;
);
$('#changeBack').click(function(e)
jcrop_api.destroy();
$("#target").attr("src", "img/1.jpg");
$("#normalPicture").attr("src", "img/1.jpg");
$("#normanPicureIntroduction").html("Original picure:250X400");
$('#changeBack').hide();
$('#changeToWiderPicture').show();
initJcrop();
return false;
);
);
function showCoords(c)
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
;
function clearCoords()
$('#coords input').val('');
;
</script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>
<body>
<table>
<tr>
<td>
<img src="img/1.jpg" id="target" />
<br>Picture with Jcrop attached
</td>
<td width=40%></td>
<td>
<img src="img/1.jpg" id="normalPicture" />
<br>
<span id='normanPicureIntroduction'>Original picure:250X400</span>
</td>
</tr>
</table>
<form id="coords" class="coords">
<div class="inline-labels">
<label>X1
<input type="text" size="4" id="x1" name="x1" />
</label>
<label>Y1
<input type="text" size="4" id="y1" name="y1" />
</label>
<label>X2
<input type="text" size="4" id="x2" name="x2" />
</label>
<label>Y2
<input type="text" size="4" id="y2" name="y2" />
</label>
<label>W
<input type="text" size="4" id="w" name="w" />
</label>
<label>H
<input type="text" size="4" id="h" name="h" />
</label>
</div>
</form>
<div style="padding-top:20px;">
<button id="changeToWiderPicture" class="btn btn-mini">changeToWiderPicture</button>
<button id="changeBack" class="btn btn-mini" style="display:none;">changeBack</button>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：我从另一个问题的另一个答案中找到了解决方案： 使用 -
$('#image').removeAttr('style');
或者直接覆盖对应的CSS样式，例如-
$("#target").css("width":"400px" ,"height":"250px");
请注意： CSS 样式的优先级高于属性，所以有时，您会发现您的更改不适用，例如 -
$("#target").attr("width","400");
$("#target").attr("height","250");
因此，为了更安全，用户使用 CSS 样式而不是属性。
【讨论】：
以上是关于Jcrop处理多张图片时，尺寸不正确的主要内容，如果未能解决你的问题，请参考以下文章