jQuery Jcrop Plugin
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().
<?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 anotherimagecopyresampled($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 outputimagejpeg($newTruecolorImage); exit;?> |
Output:
Please Login to comment...