Site Admin
Site Admin Founder of MeaningArticles
298 Views

Laravel Crop and Upload images with Croppie Plugin using jQuery Ajax

Hello Dev.

while developing image gallary utility, you want to get thumbnail or crop of images. In this article, we can going to learn how to crop image the use of jQuery croppie plugin and upload in Laravel.

first of all Create new Laravel project. we are able to begin with adding routes to routes/web.php file.

Route::get('image/crop', '[email protected]')->name('Croppie.index');

Route::post('image/crop', '[email protected]')->name('Croppie.submit');

After that create CroppieController using below command.

php artisan make:controller CroppieController

Now open CroppieController file and add below methods.
CroppieController.php

<?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 on this path resource/views/croppie.blade.php and add below code in file.
croppie.blade.php

<html lang="en">

<head>
    <title>Laravel Cropping and uploading images with Croppie plugin using jQuery Ajax - meaningarticles.com </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">Cropping and uploading an image in laravel - meaningarticles.com</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>

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.