Site Admin
Site Admin Founder of MeaningArticles
53 Views

Crop and upload an image with Croppie plugin using jQuery Ajax in Laravel

Hello Dev.

While developing image gallary application, you need to get thumbnail or crop of image. In this Article, we will going to learn how to crop image using jQuery croppie plugin and upload in Laravel.

First of Create new Laravel project. We will start with adding routes to routes/web.php file.

Route::get('image/crop', 'CroppieController@index')->name('Croppie.index');

Route::post('image/crop', 'CroppieController@submit')->name('Croppie.submit');

 

After that create CroppieController using below command.

php artisan make:controller CroppieController

 

Now open CroppieController file and add below methods.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CropImageController extends Controller
{
     public function index()
    {
      return view('croppie');
    }
     public function submit(Request $request)
    {
        $image = $request->image;

        list($type, $image) = explode(';', $image);
        list(, $image) = explode(',', $image);
        $image = base64_decode($image);
        $image_name= time().'.png';
        $path = public_path('uploads/'.$image_name);

        file_put_contents($path, $image);
        return response()->json(['status' => true]);
    }
}

 

In the last stage, create blade file resource/views/croppie.blade.php

<html lang="en">
<head>
	<title>Laravel PHP - Cropping and uploading an image with Croppie plugin using jQuery Ajax </title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
	<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
	<div class="container">
		<div class="panel panel-info">
			<div class="panel-heading">Laravel PHP - Cropping and uploading an image with Croppie plugin using jQuery Ajax</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-4 text-center">
						<div id="upload-demo"></div>
					</div>
					<div class="col-md-4" style="padding:5%;">
						<strong>Select image to crop:</strong>
						<input type="file" id="image">
						<button class="btn btn-primary btn-block upload-image" style="margin-top:2%">Upload Image</button>
					</div>
					<div class="col-md-4">
						<div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$.ajaxSetup({
			headers: {
			    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

		var resize = $('#upload-demo').croppie({
		    enableExif: true,
		    enableOrientation: true,    
		    viewport: {
		        width: 200,
		        height: 200,
		        type: 'circle' //square
		    },
		    boundary: {
		        width: 300,
		        height: 300
		    }
		});

		$('#image').on('change', function () { 
		  var reader = new FileReader();
		    reader.onload = function (e) {
		      resize.croppie('bind',{
		        url: e.target.result
		      }).then(function(){
		        console.log('jQuery bind complete');
		      });
		    }
		    reader.readAsDataURL(this.files[0]);
		});

		$('.upload-image').on('click', function (ev) {
		  resize.croppie('result', {
		    type: 'canvas',
		    size: 'viewport'
		  }).then(function (img) {
		    $.ajax({
		      url: "{{ route('Croppie.submit') }}",
		      type: "post",
		      data: {"image":img},
		      success: function (data) {
		        html = '<img src="' + img + '" />';
		        $("#preview-crop-image").html(html);
		      }
		    });
		  });
		});
	</script>
</body>
</html>

 

Now everything is ready, I hope it can help you, thanks for visit my articles if you like my article then share with your friend and on social platform.