Hi Everybody,
Today I am going to write this tutorial how to crop images with jQuery and PHP. I have used jCrop JavaScript library to perform this task with PHP its a very easy to implement and very useful for thumbnail generation. Hope you love this tutorial.
Requirement
Download the current version of Jcrop
Place the files on your web server so you can request them from your page
You also must have jQuery installed and included!
<?php
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src = 'demo_files/pool.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['imgX1'],$_POST['imgY1'],
$targ_w,$targ_h,$_POST['imgWidth'],$_POST['imgHeight']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
?>
This will simply show image on crop if you want to save that image in some directory then make changes in last two line as below.
//header('Content-type: image/jpeg');
imagejpeg($dst_r,PATH_TO_SAVE_IMAGE,$jpeg_quality);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Live Cropping Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
$(function(){
$(\'#cropbox\').Jcrop({
aspectRatio: 1,
onSelect: SetCoordinates,
// minSize:[200,200], start minimum image size
// maxSize:[200,200], max size should be...
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
showPreview(c);
}
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
</script>
</head>
<body>
<form action="crop.php" method="post">
<div class="modal-body text-center" >
<div><img src="demo_files/pool.jpg" id="cropbox"/></div>
<div style="width: 405px; height: 200px;" id="preview"><img src="demo_files/sago.jpg" style="display:'none'"/>
</div>
<div class="clearfix"></div>
<div class="modal-footer">
<input type="submit" id="btnCrop" class="btn btn-success" value="Crop"/>
<input type="button" id="btnUpload" class="btn btn-failure" value="Cancel"/>
<input type="hidden" name="PicimgX1" id="PicimgX1" />
<input type="hidden" name="PicimgY1" id="PicimgY1" />
<input type="hidden" name="PicimgWidth" id="PicimgWidth" />
<input type="hidden" name="PicimgHeight" id="PicimgHeight" />
</div>
</form>
</body>
</html>
If you face any problem feel free to post your doubt or suggestion in comment box.
Thanks
Today I am going to write this tutorial how to crop images with jQuery and PHP. I have used jCrop JavaScript library to perform this task with PHP its a very easy to implement and very useful for thumbnail generation. Hope you love this tutorial.
Requirement
Download the current version of Jcrop
Place the files on your web server so you can request them from your page
You also must have jQuery installed and included!
PHP Methods to save image:
crop.php<?php
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src = 'demo_files/pool.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['imgX1'],$_POST['imgY1'],
$targ_w,$targ_h,$_POST['imgWidth'],$_POST['imgHeight']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
?>
This will simply show image on crop if you want to save that image in some directory then make changes in last two line as below.
//header('Content-type: image/jpeg');
imagejpeg($dst_r,PATH_TO_SAVE_IMAGE,$jpeg_quality);
Html JavaScript Configurations:
write below html after php code in crop.php<!DOCTYPE html>
<html lang="en">
<head>
<title>Live Cropping Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
$(function(){
$(\'#cropbox\').Jcrop({
aspectRatio: 1,
onSelect: SetCoordinates,
// minSize:[200,200], start minimum image size
// maxSize:[200,200], max size should be...
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
showPreview(c);
}
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
</script>
</head>
<body>
<form action="crop.php" method="post">
<div class="modal-body text-center" >
<div><img src="demo_files/pool.jpg" id="cropbox"/></div>
<div style="width: 405px; height: 200px;" id="preview"><img src="demo_files/sago.jpg" style="display:'none'"/>
</div>
<div class="clearfix"></div>
<div class="modal-footer">
<input type="submit" id="btnCrop" class="btn btn-success" value="Crop"/>
<input type="button" id="btnUpload" class="btn btn-failure" value="Cancel"/>
<input type="hidden" name="PicimgX1" id="PicimgX1" />
<input type="hidden" name="PicimgY1" id="PicimgY1" />
<input type="hidden" name="PicimgWidth" id="PicimgWidth" />
<input type="hidden" name="PicimgHeight" id="PicimgHeight" />
</div>
</form>
</body>
</html>
If you face any problem feel free to post your doubt or suggestion in comment box.
Thanks
I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
ReplyDeleteWe use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)
Thanks Dilliprasad.
DeleteHowever this is 3 year old post, now we have new technology, so yes we can do it now with some more advanced concept.
I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
ReplyDeleteWe use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)
I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
ReplyDeleteWe use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
efficient.
I have a couple suggestions that might make it work better:
1. Increase the height of the window the cover image is being displayed.
2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
element already)
Please do that and post the updates here.
Delete