Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

jQuery Jcrop Plugin

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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>
    <!-- All the required libraries to
         crop the image-->
    <link rel="stylesheet" 
        type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="jquery.Jcrop.min.js"></script>
        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;
        How to crop image using 
        jQuery and PHP
        <img src="gfg2.jpg" id="cropImageID" 
                class="img" /><br />
    <div id="btn">
        <input type='button' id="cropBtnID" 
                value='Crop Image'>
        <img src="#" id="outputImage" 
    <script type="text/javascript">
        $(document).ready(function () {
            var size;
                /* 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 };
                        "visibility", "visible");
                }//end onSelect
            });//end Jcrop method
            $("#cropBtnID").click(function () {
                var img = $("#cropImageID").attr('src');
                    'image-features.php?x = ' +
                    size.x + ' & y=' + size.y +
                    ' & w=' + size.w + '&h=' + 
                    size.h + '&img=' + img);
        });//end document ready fn

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

// 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
        $newImage, 0, 0, $_GET['x'], $_GET['y'], 
        $_GET['w'], $_GET['h'], $_GET['w'], 
header('Content-type: image/jpeg');
// Display image to browser as output


My Personal Notes arrow_drop_up
Last Updated : 31 Jul, 2020
Like Article
Save Article
Similar Reads
Related Tutorials