Jcrop 裁剪图像无法正常工作，正在裁剪错误的部分
Posted
技术标签:
【中文标题】Jcrop 裁剪图像无法正常工作，正在裁剪错误的部分【英文标题】：Jcrop Cropping images does not work properly, wrong sections are being cropped 【发布时间】：2015-01-29 13:48:47 【问题描述】：我正在使用 jcrop 裁剪图像。以下代码包含客户端代码，该代码将图像连同坐标一起发送到服务器端进行裁剪。据我所知，jcrop 代码看起来很好，但没有返回正确的结果。
为此工作了几个小时但没有任何成功。搜索谷歌等但没有成功。 任何帮助将不胜感激。
<html>
<form id="frm1" action="jcropServer.php" method="post" enctype="multipart/form-data" >
<img id="img1"/>
<label> <input type="text" size="4" id="x" name="x" /></label>
<label><input type="text" size="4" id="y" name="y" /></label>
<label> <input type="text" size="4" id="x2" name="x2" /></label>
<label> <input type="text" size="4" id="y2" name="y2" /></label>
<label> <input type="text" size="4" id="w" name="w" /></label>
<label> <input type="text" size="4" id="h" name="h" /></label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="readURL(this)">
<input type="submit" value="Upload Image" name="submit">
</form>
<script>
function readURL(input)
if(document.getElementById("fileToUpload").value != "")
if ($('#img1').data('Jcrop'))
$('#img1').data('Jcrop').destroy();
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function (e)
$('#img1').attr('src',e.target.result);
$('#img1').Jcrop(
aspectRatio: 1,
onChange: showCoords,
onSelect: showCoords,
);
reader.readAsDataURL(input.files[0]);
function showCoords(c)
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
;
</script>
</html>
<?php
if(isset($_FILES['fileToUpload']))
$namecv=$_FILES['fileToUpload']['name'];
move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"shared/cv/".$namecv);
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src='shared/cv/'.$_FILES['fileToUpload']['name'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w,$targ_h);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h ,$_POST['w'],$_POST['h']);
header('Content-Type: image/jpeg');
imagejpeg($dst_r,null, $jpeg_quality);
?>
【问题讨论】：
【参考方案1】：我有同样的问题。 一个可能的原因是由于客户端的图像大小调整（显式或隐式）而更改了坐标。选择后，需要固定比例：
$('#img1').Jcrop(
onSelect: function (coords)
// fix crop size: find ratio dividing current per real size
var ratioW = $('#img1')[0].naturalWidth / $('#img1').width();
var ratioH = $('#img1')[0].naturalHeight / $('#img1').height();
var currentRatio = Math.min(ratioW, ratioH);
$('#x').val(Math.round(coords.x * currentRatio));
$('#y').val(Math.round(coords.y * currentRatio));
$('#w').val(Math.round(coords.w * currentRatio));
$('#h').val(Math.round(coords.h * currentRatio));
);
如果您需要它们（看起来并非如此），请不要忘记同时修复 x2 和 y2。 此外，还可以优化选择器。
【讨论】：
非常感谢答案，但它并没有让我的情况变得更好:-( 坐标转换了吗？ 没有@luis Soares。但是使用trueSize得到了解决方案：[w，h]给出了图像的真实高度，宽度并相应地调整坐标。并以正确的方式裁剪图像。但是thnx用于回复。 谢谢！对我来说很好。 @user3264646 是的，添加 trueSize 也对我有用，这是我的工作代码的一部分（我将添加人们适应他们的代码所必需的内容）：$("#selector").Jcrop ( aspectRatio: 1, trueSize: [$("#selector").get(0).naturalWidth, $("#selector").get(0).naturalHeight] );【参考方案2】：我遇到了同样的问题，浪费了很多时间。 我正在设置我的高度和宽度
<img>
标签。 我相信您可能正在为
设置手动高度和宽度<img id="img1"/>
img 标签的这种手动大小设置会导致 jcrop 获取相对于 0,0 的错误坐标。 希望对您有所帮助。
【讨论】：
以上是关于Jcrop 裁剪图像无法正常工作，正在裁剪错误的部分的主要内容，如果未能解决你的问题，请参考以下文章