crop with resize image using the croppie plugin

Today, In this tutorial, we are going to tell you how to crop with resize and upload using jquery ajax and php. so let’s discuss about croppie plugin.

It’s used to create user avatar(thumbnail) image and the specific size-wise or crop images are used in many websites, so we will use the cropping plugin for that type image upload.

jquery Croppie plugin is an Html5 canvas-based image cropping library and it’s provided zooming facility and cropper type option like as square and circle.

index.php

In this file, we are creating the bootstrap modal and when the user clicks on add image button then will be open the modal and user can resize and crop the image. when the user clicks on upload images button then the image will be upload in the upload directory by ajax.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>crop with resize image using the croppie plugin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.css">

</head>
<body>

<div class="container">
		 <div class="row">
			<div class="col-lg-offset-4 col-lg-8">
				<h2>Image Upload</h2>
			</div>
		 </div>	
	   <div class="row">
			<div class="col-lg-offset-4 col-lg-8">
			   <div id="upload_image" style="background:#e1e1e1;width:300px;padding:30px;height:300px;"></div>
			</div>
		</div>
		<br>
		<div class="row">
			<div class="col-lg-offset-5 col-lg-7">
				<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Add Image</button>
			</div>
		</div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Upload image</h4>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col-lg-4">
                <div id="select_image" style="width:350px"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <label for="pwd">Select Image::</label>
                <input type="file" id="upload">
            </div>
            <div class="col-lg-4">
                <button class="btn btn-success upload_result">Upload Image</button>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<script type="text/javascript">
$uploadCrop = $('#select_image').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'square'
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#upload').on('change', function () {
	var reader = new FileReader();
    reader.onload = function (e) {
    	$uploadCrop.croppie('bind', {
    		url: e.target.result
    	}).then(function(){
    		console.log('jQuery bind complete');
    	});

    }
    reader.readAsDataURL(this.files[0]);
});


$('.upload_result').on('click', function (ev) {
	$uploadCrop.croppie('result', {
		type: 'canvas',
		size: 'viewport'
	}).then(function (resp) {


		$.ajax({
			url: "save_image.php",
			type: "POST",
			data: {"image":resp},
			success: function (data) {
				html = '<img src="' + resp + '" />';
				$("#upload_image").html(html);
				$("#myModal").modal("hide");
			}
		});
	});
});


</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<!DOCTYPE html>

<head>

<title>crop with resize image using the croppie plugin</title>

</head>

<body>

<h2>Image Upload</h2>

</div>

</div>

<br>

<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Add Image</button>

</div>

<h4 class="modal-title">Upload image</h4>

</div>

</div>

<label for="pwd">Select Image::</label>

</div>

<button class="btn btn-success upload_result">Upload Image</button>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

$uploadCrop = $('#select_image').croppie({

enableExif: true,

viewport: {

width: 200,

height: 200,

type: 'square'

boundary: {

width: 300,

height: 300

}

});

$('#upload').on('change', function () {

var reader = new FileReader();

reader.onload = function (e) {

$uploadCrop.croppie('bind', {

url: e.target.result

}).then(function(){

console.log('jQuery bind complete');

});

}

reader.readAsDataURL(this.files[0]);

});

$('.upload_result').on('click', function (ev) {

$uploadCrop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function (resp) {

$.ajax({

url: "save_image.php",

type: "POST",

data: {"image":resp},

success: function (data) {

html = '<img src="' + resp + '" />';

$("#upload_image").html(html);

$("#myModal").modal("hide");

}

});

</script>

</body>

</html>

save_image.php

<?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);
echo 'success';
?>

<?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);

echo 'success';