How to Crop Image Before Uploading using Cropper Js?

In this article, we will learn how to crop the image before uploading it with Cropper JS & PHP.

Cropper JS lmage

We are using Cropper.js library this is a JavaScript library for cropping image.

With the Cropper.js, you can select an specific area of an image, and then upload the coordinates data to server-side to crop the image, or crop the image on browser-side directly.

Here, we create one live demo for cropping image.

Create one file like crop-image.html and put the following code.

        <title>How to Crop Image Before Uploading using Cropper Js?</title>
		 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
		<meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href=""/>
        <link rel="stylesheet" href=""  />
    <style type="text/css">
        img {
            display: block;
            max-width: 100%;
        .preview {
            overflow: hidden;
            width: 160px; 
            height: 160px;
            margin: 10px;
            border: 1px solid red;
        <div class="container">
            <h5>Upload Images</h5>
            <form method="post">
                <input type="file" name="image" class="image">

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Crop image</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                    <div class="modal-body">
                        <div class="img-container">
                            <div class="row">
                                <div class="col-md-8">  
                                    <!--  default image where we will set the src via jquery-->
                                    <img id="image">
                                <div class="col-md-4">
                                    <div class="preview"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="crop">Crop</button>


<script src=""></script>
<script src=""></script>
<script src=""></script>

    var bs_modal = $('#modal');
    var image = document.getElementById('image');
    var cropper,reader,file;

    $("body").on("change", ".image", function(e) {
        var files =;
        var done = function(url) {
            image.src = url;

        if (files && files.length > 0) {
            file = files[0];

            if (URL) {
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function(e) {

    bs_modal.on('', function() {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
            preview: '.preview'
    }).on('', function() {
        cropper = null;

    $("#crop").click(function() {
        canvas = cropper.getCroppedCanvas({
            width: 160,
            height: 160,

        canvas.toBlob(function(blob) {
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.onloadend = function() {
                var base64data = reader.result;
                    type: "POST",
                    dataType: "json",
                    url: "crop_image_upload.php",
                    data: {image: base64data},
                    success: function(data) { 
                        alert("success upload image");


In above code we have added below css and javascript library which is required.

<link rel="stylesheet" href=""/>
<link rel="stylesheet" href=""  />

<script src=""></script>
<script src=""></script>
<script src=""></script>

For uploading image on server to create crop_image_upload.php file and put the following code

$folderPath = 'crop_images/';
$image_parts = explode(";base64,", $_POST['image']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.png';
file_put_contents($file, $image_base64);
echo json_encode(["image uploaded successfully."]);

also you need to create one folder like crop_images in your project

Related Posts

Divyesh Patel

I'm Divyesh Patel, Web & App developer. I want to make things that make a difference. With every line of code, i strive to make the web a beautiful place.

Leave a Reply