Iam using jcrop for cropping image.The following code contains client side code which sends the image along with coordinates to server side for cropping.As far as i have understood jcrop the code appears fine but is not returning the correct results.
Working on this for hours but without any success.Searched google etc but no success. Any help will be deeply appreciated.
<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);
?>
Iam using jcrop for cropping image.The following code contains client side code which sends the image along with coordinates to server side for cropping.As far as i have understood jcrop the code appears fine but is not returning the correct results.
Working on this for hours but without any success.Searched google etc but no success. Any help will be deeply appreciated.
<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);
?>
2 Answers
Reset to default 9I had the same issue. One probable cause is that the coordinates are changed due to the image resizing (explicitly or implicitly) at client side. After selection, you need to fix the ratio:
$('#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));
}
});
If you need them (which doesn't seem so), don't forget to fix also x2 and y2. Additionally, selectors could be optimized.
I had the same problem , got my lot of time wasted. i was setting height and width of my
<img>
tag. i believe you may be setting manual height and width for the
<img id="img1"/>
This manual size setting of img tag causes the jcrop to get wrong coordinates with respect to 0,0. hope it helps.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744836440a4596289.html
评论列表（0条）