Croppie.js is a popular JavaScript library used for cropping and manipulating images in web applications. It allows you to create a user-friendly interface for cropping images. When combined with Laravel, a PHP web application framework, you can implement image cropping functionality on your website. 

Here's steps how you can use Laravel 10 and Croppie.js to crop an image and upload:

Set up Laravel: First, make sure you have a Laravel application set up and running. You'll need to create routes, controllers, and views for image uploading and cropping.

Upload an Image: Create a form that allows users to upload an image. In Laravel, you can use the Form or FormRequest class to handle file uploads.

Frontend Integration: Include the Croppie.js library in your HTML page. You can do this by adding a script tag pointing to the Croppie.js file, or by using a package manager like npm or yarn to install it.

Initialize Croppie: Create a JavaScript function to initialize the Croppie instance on the uploaded image. You can specify the dimensions and aspect ratio for cropping. For example, you can set a square aspect ratio for profile pictures or a custom aspect ratio for banner images.

Crop the Image: Allow users to adjust the cropping area by dragging and resizing it using the Croppie interface. When they are satisfied with the selection, trigger the crop action.

Send Data to Laravel: When the user confirms the crop, send the cropping data (coordinates and dimensions) to your Laravel server. You can use AJAX or a form submission to send this data.

Crop and Save: In your Laravel controller, use a library like Intervention Image to crop the uploaded image based on the data received from the frontend. You can also apply additional image processing if needed, such as resizing or optimizing.

Save the Cropped Image: Save the cropped image to a storage location, such as the server's file system or cloud storage. Update the database record with the path to the cropped image, so you can retrieve and display it later.

Display the Cropped Image: Show the cropped image to the user or update their profile picture with the newly cropped version.

Error Handling: Implement error handling and validation at each step to ensure that the image cropping process is robust and user-friendly.

Laravel 10 Crop and Upload Image using Croppie js
4.05 GEEK