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 () {
var 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 () {
var 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().
#css #html #jquery #php #web technologies #web technologies questions #jquery-plugin
