Crop Image Before Upload Using Croppie Plugin

Websolutionstuff | Aug-15-2020 | Categories : Laravel PHP jQuery HTML

In this article, we will see how to crop images before uploading using the croppie plugin. any times we have requirements to crop the image before uploading to the server. So here I will give you an example of how to crop the image before uploading it to the server. croppie plugin provides circle and square crop photos and several other options of settings. Croppie plugin is easy to use, fast image cropping plugin with different types of configuration options.

So, let's see the cropped image before uploading using ajax or crop image using croppie plugins.

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

I have created one folder crop_image and created an index.php file in this folder.

<html lang="en">
<head>
  <title>Crop image using croppie plugins - websolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
</head>
<body>

<h3 class="text-center">Crop image using croppie plugins - websolutionstuff.com</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>
			  		<div class="col-md-4" style="padding-top:30px;">
						<strong>Select Image:</strong>
						<br/>
						<input type="file" id="upload">
						<br/>
						<button class="btn btn-success upload-result">Upload Image</button>
			  		</div>
			  		<div class="col-md-4" >
						<div id="uploaded-input" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px">							
						</div>
			  		</div>
			  	</div>
			</div>
		</div>
	</div>
</div>


<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', {
    		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: "/crop_image/store_img_ajax.php",
			type: "POST",
			data: {"image":resp},
			success: function (data) {
				html = '<img style="margin: 20px;" src="' + resp + '" />';
				$("#uploaded-input").html(html);
			}
		});
	});
});
</script>
</body>
</html>

 

 

Now, We need to create a store_img_ajax.php file to store crop images in this folder crop_image/store_img_ajax.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);
?>

And you will get output like the below screenshot.

Crop_image_using_croppie_plugins

 


You might also like:

Recommended Post
Featured Post
How To Use Sweetalert2 In Laravel
How To Use Sweetalert2 In Lara...

Today we will learn how to use sweetalert2 In laravel, You can use sweetalert2 in laravel as well as php, ...

Read More

May-03-2021

Laravel 9 Has Many Through Relationship Example
Laravel 9 Has Many Through Rel...

In this article, we will see that laravel 9 has many through relationship example. hasManyThrough relationship is diffic...

Read More

Apr-04-2022

Laravel 8 Eloquent whereHas Condition
Laravel 8 Eloquent whereHas Co...

In this example we will see laravel 8 eloquent whereHas() condition. you will learn about wherehas() condition in l...

Read More

Oct-06-2021

How to Add Watermark on Image in Laravel 11
How to Add Watermark on Image...

Hello, laravel web developers! In this article, we'll see how to add a watermark on the image in laravel 11. He...

Read More

Aug-21-2024