jQuery Jcrop Plugin

31 Jul, 2020
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:
jQuery-Plugin
CSS
HTML
JQuery
PHP
Web Technologies
Web technologies Questions
HTML
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.