Crop Image Before Upload Using Croppie Plugin

In this example I will show you how to crop image before upload using croppie Plugin, many times we have requirements to crop image before upload in server.

So here I will give you example of how to crop image before uploading in server, croppie plugin provide circle and square crop photo and several others option of settings.

Read Also : How To Validate Max File Size Using Javascript

Here, I have used croppie.js CDN for crop image So copy my code and get output.

I have created one folder crop_image and create index.php file into this folder.

<html lang="en">
<title>Crop image using croppie plugins -</title>
<link href="" rel="stylesheet">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<h3 class="text-center">Crop image using croppie plugins -</h3>
<div class="container">
<div class="panel panel-default" style="margin-top: 25px;">
<div class="panel-heading">Upload Image</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center" style="padding-top:30px;">
<div id="upload-input" style="width:350px; height: 400px;"></div>
<div class="col-md-4" style="padding-top:30px;">
<strong>Select Image:</strong>
<input type="file" id="upload">
<button class="btn btn-success upload-result">Upload Image</button>
<div class="col-md-4" >
<div id="uploaded-input" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px">
<script type="text/javascript">
$uploadCrop = $('#upload-input').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
boundary: {
width: 300,
height: 300
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
console.log('jQuery bind complete');
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
url: "/crop_image/store_img_ajax.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img style="margin: 20px;" src="' + resp + '" />';

Now, We need to create store_img_ajax.php file to store crop images in this folder crop_image/store_img_ajax.php

$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents('upload/'.$imageName, $data);

Here Code is Over.

And Don’t Forgot to Like, Share and “Claps”.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.