Open In App

jQuery Jcrop Plugin

Improve
Improve
Like Article
Like
Save
Share
Report

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

html




<!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 () {
            let 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 () {
                let 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




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


Output:



Last Updated : 13 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads