Laravel Crop Image with Cropper.js Before Upload

To implement image cropping with Cropper.js before uploading in Laravel, follow these steps:


1. Include the Required Libraries:

   Ensure you have Laravel set up in your project. You'll also need to include the `cropperjs` library for image cropping. You can include it using a CDN or install it through npm/yarn.


   npm install cropperjs


2. Create Routes and Controller:

   Create routes and a controller for handling the image cropping process. For example, in `routes/web.php`:


   Route::get('/crop-image', 'ImageController@index');

   Route::post('/crop-image', 'ImageController@crop');


3. Create Views:

   Create views for the cropping form and the cropped image display. For example, `resources/views/crop_image.blade.php`:


   <!DOCTYPE html>

   <html>

   <head>

       <title>Laravel Image Cropping with Cropper.js</title>

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">

   </head>

   <body>

       <div class="container mt-5">

           <h2>Image Cropping Example with Cropper.js</h2>

           <form action="/crop-image" method="post" enctype="multipart/form-data">

               @csrf

               <div class="form-group">

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

                   <input type="file" class="form-control" id="image" name="image" accept="image/*" required>

               </div>

               <button type="submit" class="btn btn-primary">Upload and Crop</button>

           </form>


           @isset($croppedImage)

               <div class="mt-4">

                   <h4>Cropped Image:</h4>

                   <img src="{{ asset($croppedImage) }}" alt="Cropped Image" class="img-fluid">

               </div>

           @endisset

       </div>

       <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

       <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

       <script>

           $(document).ready(function() {

               const image = document.getElementById('image');

               const cropper = new Cropper(image, {

                   aspectRatio: 1, // Set your desired aspect ratio

                   viewMode: 1,

                   guides: false,

                   background: false,

                   autoCropArea: 0.8,

                   crop(event) {

                       // Store cropping data in hidden input fields

                       $('#x').val(event.detail.x);

                       $('#y').val(event.detail.y);

                       $('#width').val(event.detail.width);

                       $('#height').val(event.detail.height);

                   }

               });

           });

       </script>

   </body>

   </html>


4. Create Controller Methods:

   Create methods in your `ImageController` to handle the cropping process. In `ImageController.php`:


   <?php


   namespace App\Http\Controllers;


   use Illuminate\Http\Request;

   use Image;


   class ImageController extends Controller

   {

       public function index()

       {

           return view('crop_image');

       }


       public function crop(Request $request)

       {

           if ($request->hasFile('image')) {

               $image = $request->file('image');

               $filename = time() . '.' . $image->getClientOriginalExtension();

               $path = public_path('uploads/' . $filename);


               // Crop the image using the cropping data from hidden fields

               Image::make($image->getRealPath())->crop($request->width, $request->height, $request->x, $request->y)->save($path);


               return view('crop_image', ['croppedImage' => 'uploads/' . $filename]);

           }


           return redirect()->back();

       }

   }


5. Run the Application:

   Run the Laravel development server:


   php artisan serve


   Access the cropping form at `http://localhost:8000/crop-image`, select an image, adjust the cropping area using Cropper.js, and click "Upload and Crop" to see the cropped image.


This example demonstrates how to use Cropper.js to enable interactive image cropping before uploading in a Laravel application. Remember that you can further customize and enhance the implementation based on your project's requirements.