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.
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.
Using this tutorial, you can easily crop the image before uploading using crappie js with ajax in Laravel 10 app.