Crop and save image – PHP

by Posted on

You can crop the image before uploading and save it on your server using PHP. Cropping an image would require a jQuery library called cropper. You can download the cropper library from the link below:

Download cropper library

Go ahead and download this library. You will also need jQuery for this. All files have also been included in the source files below.

Including library files

After downloading and placing the files in your project, you will be need to include 3 files. jQuery, cropper.css and cropper.js. You can find those files in the source files below:

index.php

<script src="jquery-3.3.1.min.js"></script>
<script src="cropper.js"></script>
<link rel="stylesheet" type="text/css" href="cropper.css">

<!-- Image needs to be cropped, should be displayed in an <img> tag -->
<img src="adnan-afzal.jpg" style="width: 200px;" id="image">

<!-- Initiating the library and disabling the zoom from mouse wheel and from laptop mousepad -->
<script>
    $(function () {
        $("#image").cropper({
            zoomable: false
        });
    });
</script>

<!-- If you want to remove the background and make it transparent, you can apply the following styles -->
<style>
    .cropper-crop {
        display: none;
    }
    .cropper-bg {
        background: none;
    }
</style>

At this point, you will be able to crop the selected image in <img> tag. Next step is to save the cropped area from image.

Saving image cropped area

First you have to create a simple button, upon click will send an AJAX request with cropped area:

<!-- A button when clicked will save the cropped area -->
<button type="button" onclick="crop();">
    Crop
</button>

<script>
function crop() {
    // Blob is a textual form of an image which will be obtained from <img> tag
    $("#image").cropper("getCroppedCanvas").toBlob(function (blob) {

        // FormData is a built-in javascript object
        var formData = new FormData();
        formData.append("croppedImage", blob);

        $.ajax({
            url: "upload.php", // name of the file which we will be creating soon
            method: "POST",
            data: formData,
            processData: false, // necessary for sending image data
            contentType: false, // necessary for sending image data
            success: function (response) {
                alert(response);
            }, error: function (xhr, status, error) {
                console.log(status, error);
            }
        });
    });
}
</script>

Now, we just have to create a new file named upload.php and paste the following code in it. The code is pretty simple, we can storing the image sent from AJAX using the built-in PHP function called move_uploaded_file():

upload.php

<?php

move_uploaded_file($_FILES["croppedImage"]["tmp_name"], "Cropped image.jpg");
echo "Image has been uploaded";

That’s it, go on and try cropping an image and hit the “Crop” button. Your cropped area will be saved as “Cropped image.jpg”.

[wpdm_package id=’142′]

Published by adnanafzal565