我正在使用 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);
?>
最佳答案
我遇到了同样的问题。 一个可能的原因是由于在客户端调整图像大小(显式或隐式)导致坐标发生变化。选择后，需要固定比例:
$('#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。 此外，还可以优化选择器。
关于javascript - Jcrop 裁剪图像无法正常工作，裁剪了错误的部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28216360/