Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

JQuery Crop - Cropping images with jCrop

In this article we will see how to crop an image using jQuery. We will use the plugin jCrop and PHP to do this.

Hello guys, now let's talk about cropping images. There is a very good jQuery plugin that performs crop image, resizing it according to his will, his name is jCrop.

jCrop

jCrop is the quickest and easiest way to add functionality to cut images for your web application. It combines the ease of use of a typical jQuery plugin with a multi-platform DHTML, which is very useful for desktop graphical applications.

The main features of the plugin, the most important are:

  • It can be used on any image.
  • Supports aspect ratio locking.
  • Supports minSize / maxSize.
  • Callbacks for selection done, or while moving
  • API has functionality to create interactivity, including animation.
  • Support for CSS styling
  • Extra: Support for touch (still in testing) (iOS, Android, etc.)

Compatibility between browsers

  • Firefox 2 +
  • Safari 3 +
  • Opera 9.5 +
  • Google Chrome 0.2 +
  • Internet Explorer 6 +

Using the plugin

First we download the plugin at this link: http://deepliquid.com/content/Jcrop_Download.html

Now let's start our example, first we need to create our HTML document where we will place the image to be cropped (crop).

We will separately and placing listings for saying what each one of them, in the end I will put a link to download the files used in the example.

With the download of jCrop done, place the folders js and css files in a folder (the same where you will save your page). Also put the image that you will use to cut.

Note.: To perform the crop image, it takes something more than the plugin offers, we will need to use a programming language, in our example we will use PHP, the same language that is explaining the official website of the plugin.

Let's create a document .php and we will link the files .js file and the .css style. Enter the code below into your <head>.

Listing 1: Linking the necessary files

<script src="<http://deepliquid.com/Jcrop/js/jquery.Jcrop.min.js>"></script>
<script src="../js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

Remembering that the links above will vary according to the layout folder of your project.

That done, we will insert the code that should stay within the body, with the text and image that we cut.

Listing 2: HTML Code page

<div id="outer">
    <div class="jcExample">
    <div class="article">
 
        <h1>Crop jQuery</h1>
         
 
        <!--Image that we Will insert -->
        <img class='imagem_artigo' src="demo_files/pool.jpg" id="cropbox" />
 
        <!--Form to crop-->
        <form action="crop.php" method="post" onsubmit="return checkCoords();">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="submit" value="Crop Image" />
        </form>
 
 
    </div>
    </div>
    </div>


Now we need to create the javascript function that will cause us to select the crop region, enter the code below into the head of the page.

Listing 3: Javascript Function

<script language="Javascript">
 
            $(function(){
 
                $('#cropbox').Jcrop({
                    aspectRatio: 1,
                    onSelect: updateCoords
                });
 
            });
 
            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
 
            function checkCoords()
            {
                if (parseInt($('#w').val())) return true;
                alert('Select where you want to Crop.');
                return false;
            };
 
        </script>

Our example is almost ready, as we can see, it is possible select the region that you want to cut, but still cannot really cut the region.

Selecting area to crop

Figure 1: Selecting area to crop

Now only is missing, when we click on "Crop image" he crop the image and display the cropped image. For this we have to use PHP, we use a function to have done the clipping of the image.

In this example we will use the same file, our form will call the page itself, but I always advise that work with sending data via POST for form, which use a different file, separate from the page where the form with the information that will be sent.

Enter the code below before <html>:

Listing 4: PHP Code for Crop

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    $targ_w = $targ_h = 150;
    $jpeg_quality = 90;
 
    $src = 'demo_files/pool.jpg';
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);
 
    header('Content-type: image/jpeg');
    imagejpeg($dst_r,null,$jpeg_quality);
 
    exit;
}
 
// If isn’t POST, Show the Page below:
 
?>

After entering this code, just clicked the button the image will be cropped.

Cropped image

Figure 2: Cropped image

Thus our plugin is working and making a crop image.

Listing 5: Full source code

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    $targ_w = $targ_h = 150;
    $jpeg_quality = 90;
 
    $src = 'demo_files/pool.jpg';
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);
 
    header('Content-type: image/jpeg');
    imagejpeg($dst_r,null,$jpeg_quality);
 
    exit;
}
 
// If isn’t POST, show the page below:
 
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>">
<html xmlns="<http://www.w3.org/1999/xhtml>">
    <head>
 
        <script src="<http://deepliquid.com/Jcrop/js/jquery.Jcrop.min.js>"></script>
        <script src="../js/jquery.Jcrop.js"></script>
        <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
        <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
 
        <script language="Javascript">
 
            $(function(){
 
                $('#cropbox').Jcrop({
                    aspectRatio: 1,
                    onSelect: updateCoords
                });
 
            });
 
            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
 
            function checkCoords()
            {
                if (parseInt($('#w').val())) return true;
                alert('Select to crop.');
                return false;
            };
 
        </script>
 
    </head>
 
    <body>
 
    <div id="outer">
    <div class="jcExample">
    <div class="article">
 
        <h1>Crop jQuery</h1>
 
     
        <img class='imagem_artigo' src="demo_files/pool.jpg" id="cropbox" />
 
     
        <form action="crop.php" method="post" onsubmit="return checkCoords();">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="submit" value="Crop Image" />
        </form>
 
    </div>
    </div>
    </div>
    </body>
 
</html>
 

I hope you enjoyed, until next time.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login