Simple image cropping with cropper js

Hello friends, very very thanks to read my tutorial. In this tutorial, I am going to discuss about the cropping process. In nowadays cropping is essential for any site basically for the social networking site where the user can upload their profile picture and other photos. But we need to crop those picture for our site responsivity. And I have found a great and simple jquery plugin for cropping any image. So let’s enter to the main process.

Documentation

Also we need to add jquery and bootstrap library for this purpose. So now we are ready to make a simple cropping using cropper js.

What we do?

First, we will create a simple bootstrap modal. When a user chooses an image then it will show on that modal popup and after that, he/she can crop the image which will be stored automatically in the server folder. I have already a ready-made HTML code for that. You can use that one.

Now we have cropped that image and this is the time to save the image in a server folder. We will do that by using a simple PHP script. Also, we need to create a folder named “Upload“, where we will store uploaded image.

PHP Code

1

2

3

4

5

6

7

8

9

10

11

<?php

define('UPLOAD_DIR','./upload/');

$img=$_POST['image'];

$img=str_replace('data:image/jpeg;base64,','',$img);

$img=str_replace(' ','+',$img);

$data=base64_decode($img);

$file=uniqid().'.jpg';

$path=UPLOAD_DIR.$file;

$success=file_put_contents($path,$data);

print$success?$file:'Unable to save the file.';

?>

If everything is ok then it will store the image in the upload folder and return the uploaded image name to the jquery success function.That’s all. Thank’s to everyone.

Hi
Do you want to make web application with php and php framework(CI, Laravel)? Want to make android application with hybrid framework ?
Then contact with us.
We provide support for developing website and web application at very affordable price.
E-Mail us at: dataflow1117@gmail.com