Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery Jcrop Plugin

  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!