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”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right






                        filter_none










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().
















                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<?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; 


?> 



















                        chevron_right







                        filter_none










Output:




full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
geetanjali16
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.