In this article, we will learn how to crop an image using PHP and jQuery Jcrop plugin.
Note: Please download the jQuery Jcrop plugin and include the required files in the head section of your HTML code.
<link href=”jquery.Jcrop.min.css” rel=”stylesheet” type=”text/css”/>
<script src=”jquery.min.js”></script>
<script src=”jquery.Jcrop.min.js”></script>
Example: The following HTML code demonstrates the Jcrop plugin by taking an image file and giving a “Crop Image” button to crop the image and show the output cropped image in another HTML “div”.
<!DOCTYPE html> < html >
< head >
<!-- All the required libraries to
crop the image-->
< link rel = "stylesheet"
href = "jquery.Jcrop.min.css"
type = "text/css" />
< script src = "jquery.min.js" ></ script >
< script src = "jquery.Jcrop.min.js" ></ script >
< style >
body {
width: 500px;
height: 380px;
font-family: Arial, Sans-serif;
}
.btnSubmitClass {
background-color: #696969;
padding: 5px 30px;
border: #696969 1px solid;
border-radius: 4px;
color: #FFFFFF;
margin-top: 10px;
}
input#cropBtnID {
padding: 5px 25px 5px 25px;
background: #D3D3D3;
border: #98b398 1px solid;
color: #FFF;
visibility: hidden;
}
#outputImage {
margin-top: 40px;
}
</ style >
</ head >
< body >
< h2 >
How to crop image using
jQuery and PHP
</ h2 >
< div >
< img src = "gfg2.jpg"
id = "cropImageID"
class = "img" />< br />
</ div >
< div id = "btn" >
< input type = 'button'
id = "cropBtnID"
value = 'Crop Image' >
</ div >
< div >
< img src = "#"
id = "outputImage"
style = "display:none;" >
</ div >
< script type = "text/javascript" >
$(document).ready(function () {
let size;
$('#cropImageID').Jcrop({
/* Some settings for
basic configuration*/
allowSelect: true,
allowMove: true,
allowResize: true,
fixedSupport: true,
aspectRatio: 1,
onSelect: function (c) {
size = {
x: c.x, y: c.y,
w: c.w, h: c.h
};
$("#cropBtnID").css(
"visibility", "visible");
}//end onSelect
});//end Jcrop method
$("#cropBtnID").click(function () {
let img = $("#cropImageID").attr('src');
$("#outputImage").show();
$("#outputImage").attr('src',
'image-features.php?x = ' +
size.x + ' & y=' + size.y +
' & w=' + size.w + '&h=' +
size.h + '&img=' + img);
});
});//end document ready fn
</ script >
</ body >
</ html >
|
PHP code: The following PHP code implements the “image-features.php” file that is used in the above HTML code for image and color creation. The PHP function used for creating a new image is imagecreatefromjpeg() method. A new true color image is created using PHP imagecreatetruecolor() method. Other PHP functions used are imagecopyresampled() and imagejpeg().
<?php // Create a new image from a file $newImage = imagecreatefromjpeg( $_GET [ 'img' ]);
// Create a new true color image $newTruecolorImage = imagecreatetruecolor(
$_GET [ 'w' ], $_GET [ 'h' ]);
// Copy a portion from one image to another imagecopyresampled( $newTruecolorImage ,
$newImage , 0, 0, $_GET [ 'x' ], $_GET [ 'y' ],
$_GET [ 'w' ], $_GET [ 'h' ], $_GET [ 'w' ],
$_GET [ 'h' ]);
header( 'Content-type: image/jpeg' );
// Display image to browser as output imagejpeg( $newTruecolorImage );
exit ;
?> |
Output: