Live Image Upload, Crop and Resize using jQuery and PHP

Live Image Upload, Crop and Resize using jQuery and PHP

Live Image Upload

It is always an excellent idea for server space optimization to cropping images before upload. Firstly the crop feature helps to resize the image as per the required size before you upload it to the server. Secondly, you can decrease the web page size and load time by showing the image with the same display size. At last, there is a need to crop the image if you want to display the exact dimensions (width and height) on the web page. So, if your web application has image upload functionality, image crop and resize is beneficial.

You can upload an image and make a thumbnail using PHP. But if you want live image upload and crop, then you need to use jQuery with the help of PHP. The jQuery will help you to select an area of the image, and PHP can help you to crop, resize, and upload the image on the server. So, there are many jQuery plugins available for cropping image, imgAreaSelect is one of them. The imgAreaSelect plugin will help you to select an area of an image and implement image resizing and cropping functionality. In this tutorial, we will explain to you, crop, and resize an image using jQuery and PHP.

Before you begin to implement live image upload and crop functionality, let’s take a look at the file structure.

├── index.html
├── upload.php
├── js/
│   ├── jquery.imgareaselect.js
│   └── jquery.min.js
├── css/
│   └── imgareaselect.css
└── uploads/
    └── images/
        └── thumb/

JavaScript Code  

jQuery library:

Firstly, include the jQuery library file.

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

imgAreaSelect Plugin:

Use the imgAreaSelect plugin to implement image crop functionality. Also, include the imgAreaSelect plugin library file.

<!-- imgAreaSelect jQuery plugin -->
<link rel="stylesheet" href="css/imgareaselect.css" />
<script src="js/jquery.imgareaselect.js"></script>

The JavaScript code given below will create an instant image preview and permits the user to select an area of the image.

// Check coordinates
function checkCoords(){
    if(parseInt($('#w').val())) return true;
    alert('Please select a crop region then press upload.');
    return false;

// Set image coordinates
function updateCoords(im,obj){
    var img = document.getElementById("imagePreview");
    var orgHeight = img.naturalHeight;
    var orgWidth = img.naturalWidth;
    var porcX = orgWidth/im.width;
    var porcY = orgHeight/im.height;
    $('input#x').val(Math.round(obj.x1 * porcX));
    $('input#y').val(Math.round(obj.y1 * porcY));
    $('input#w').val(Math.round(obj.width * porcX));
    $('input#h').val(Math.round(obj.height * porcY));

    // Prepare instant image preview
    var p = $("#imagePreview");
        //fadeOut or hide preview
        //prepare HTML5 FileReader
        var oFReader = new FileReader();
        oFReader.onload = function(oFREvent){
    // Implement imgAreaSelect plugin
        onSelectEnd: updateCoords

HTML Code       

The following HTML makes an image upload form to select an image.

<form method="post" action="upload.php" enctype="multipart/form-data" onsubmit="return checkCoords();">
    <p>Image: <input name="image" id="fileInput" size="30" type="file" /></p>
    <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 name="upload" type="submit" value="UPLOAD" />
<p><img id="imagePreview" style="display:none;"/></p>

SEE ALSO: Upload Multiple Images without Page Refresh using jQuery Ajax and PHP

Image Upload and Crop (upload.php)   

It handles the image upload, crop, and resize functionality using PHP.

$error = '';

// If the upload form is submitted
    // Get the file information
    $fileName   = basename($_FILES["image"]["name"]);
    $fileTmp    = $_FILES["image"]["tmp_name"];
    $fileType   = $_FILES["image"]["type"];
    $fileSize   = $_FILES["image"]["size"];
    $fileExt    = substr($fileName, strrpos($fileName, ".") + 1);
    // Specify the images upload path
    $largeImageLoc = 'uploads/images/'.$fileName;
    $thumbImageLoc = 'uploads/images/thumb/'.$fileName;

    // Check and validate file extension
    if((!empty($_FILES["image"])) && ($_FILES["image"]["error"] == 0)){
        if($fileExt != "jpg" && $fileExt != "jpeg" && $fileExt != "png" && $fileExt != "gif"){
            $error = "Sorry, only JPG, JPEG, PNG, and GIF files are allowed.";
        $error = "Select an image file to upload.";
    // If everything is ok, try to upload file
    if(empty($error) && !empty($fileName)){
        if(move_uploaded_file($fileTmp, $largeImageLoc)){
            // File permission
            chmod($largeImageLoc, 0777);
            // Get dimensions of the original image
            list($width_org, $height_org) = getimagesize($largeImageLoc);
            // Get image coordinates
            $x = (int) $_POST['x'];
            $y = (int) $_POST['y'];
            $width = (int) $_POST['w'];
            $height = (int) $_POST['h'];

            // Define the size of the cropped image
            $width_new = $width;
            $height_new = $height;
            // Create new true color image
            $newImage = imagecreatetruecolor($width_new, $height_new);
            // Create new image from file
            switch($fileType) {
                case "image/gif":
                    $source = imagecreatefromgif($largeImageLoc); 
                case "image/pjpeg":
                case "image/jpeg":
                case "image/jpg":
                    $source = imagecreatefromjpeg($largeImageLoc); 
                case "image/png":
                case "image/x-png":
                    $source = imagecreatefrompng($largeImageLoc); 
            // Copy and resize part of the image
            imagecopyresampled($newImage, $source, 0, 0, $x, $y, $width_new, $height_new, $width, $height);
            // Output image to file
            switch($fileType) {
                case "image/gif":
                    imagegif($newImage, $thumbImageLoc); 
                case "image/pjpeg":
                case "image/jpeg":
                case "image/jpg":
                    imagejpeg($newImage, $thumbImageLoc, 90); 
                case "image/png":
                case "image/x-png":
                    imagepng($newImage, $thumbImageLoc);  
            // Destroy image

            // Display cropped image
            echo 'CROPPED IMAGE:<br/><img src="'.$thumbImageLoc.'"/>';
            $error = "Sorry, there was an error uploading your file.";

// Display error
echo $error;


These Live Image Upload, Crop and Resize scripts are convenient to crop the image and resize it. Also, you can upload a picture and make a thumbnail with the help of PHP.

Also, read our previous blog- Multiple Image Upload with View, Edit and Delete in PHP 

Also, read our previous blog- Image Gallery CRUD with PHP and MySQL

Exit mobile version