PHPackages                             sharifuddin/laravel-image-cropper - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. sharifuddin/laravel-image-cropper

ActiveLibrary[Image & Media](/categories/media)

sharifuddin/laravel-image-cropper
=================================

A flexible and optimized Laravel image cropper package with multiple ratios, optional cropping, and WebP/JPG/PNG support.

1.0.0(4mo ago)014MITJavaScriptPHP ^8.0

Since Dec 16Pushed 4mo agoCompare

[ Source](https://github.com/sharifWebDev/laravel-image-cropper)[ Packagist](https://packagist.org/packages/sharifuddin/laravel-image-cropper)[ Docs](https://github.com/sharifwebdev/laravel-image-cropper)[ RSS](/packages/sharifuddin-laravel-image-cropper/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (5)Versions (2)Used By (0)

Laravel Image Cropper
=====================

[](#laravel-image-cropper)

[![License: MIT](https://camo.githubusercontent.com/08cef40a9105b6526ca22088bc514fbfdbc9aac1ddbf8d4e6c750e3a88a44dca/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e737667)](LICENSE.md)[![PHP Version](https://camo.githubusercontent.com/2f6f9af2e917cbf5786673e8e4ed8d0d9b29be6131327a992063e69136a93411/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e302532422d626c7565)](https://php.net)[![Laravel Version](https://camo.githubusercontent.com/2110c201c129d99646c66a9f0ac413b69f79fe01dacf2c7b5443caa73d922f20/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d392e782532422d6f72616e6765)](https://laravel.com)[![Latest Version](https://camo.githubusercontent.com/c6085dcddc4a134cb58a71749186f5bca10cdf962dfc537933f0f5dd35f1f432/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736861726966756464696e2f6c61726176656c2d696d6167652d63726f70706572)](https://packagist.org/packages/sharifuddin/laravel-image-cropper)[![Total Downloads](https://camo.githubusercontent.com/db9a41b7f3dcd13c4a98d63c7c75888ccefc82f6a2e1a8c22a3dc376b9af536d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736861726966756464696e2f6c61726176656c2d696d6167652d63726f70706572)](https://packagist.org/packages/sharifuddin/laravel-image-cropper)

A powerful, feature-rich Laravel package for client-side image cropping with modal interface. Transform any file input into a professional cropping tool with advanced features.

---

✨ Features
----------

[](#-features)

### 🖼️ **Advanced Cropping Interface**

[](#️-advanced-cropping-interface)

- **Modal-based cropping** with full-screen editing
- **Multiple aspect ratios** (Square, Landscape, Portrait, Free)
- **Real-time preview** with zoom and rotation controls
- **Draw & adjust** crop area with mouse
- **Edit functionality** to modify crops after saving

### ⚡ **Smart Upload Options**

[](#-smart-upload-options)

- **Client-side only mode** (no server upload required)
- **Server upload mode** with automatic optimization
- **Base64 support** for direct form submission
- **Multiple formats** (WebP, JPG, PNG, GIF, SVG)
- **Automatic quality optimization**

### 🔌 **Seamless Integration**

[](#-seamless-integration)

- **Auto-transform** any file input with `image-cropper` class
- **Blade component** for easy implementation
- **Form compatible** - works with any existing form
- **Responsive design** for all devices
- **Bootstrap 5 compatible**

### 🛡️ **Professional Features**

[](#️-professional-features)

- **Large file support** up to 10GB
- **Memory-efficient streaming** for big files
- **Comprehensive error handling**
- **CSRF protection** built-in
- **Validation support**

---

📦 Installation
--------------

[](#-installation)

### 1. Install via Composer

[](#1-install-via-composer)

```
composer require sharifuddin/laravel-image-cropper
```

### 2. Publish Assets & Configuration

[](#2-publish-assets--configuration)

```
# Publish configuration
php artisan vendor:publish --tag=image-cropper-config

# Publish assets (CSS & JS)
php artisan vendor:publish --tag=image-cropper-assets

# Publish views (optional)
php artisan vendor:publish --tag=image-cropper-views
```

### 3. Include Dependencies in Layout

[](#3-include-dependencies-in-layout)

Add these to your main layout file (`resources/views/layouts/app.blade.php`):

```

    @yield('content')

```

### 4. Configure Storage (Optional)

[](#4-configure-storage-optional)

If using server upload mode, link storage:

```
php artisan storage:link
```

---

⚙️ Configuration
----------------

[](#️-configuration)

After publishing configuration, edit `config/image-cropper.php`:

```
return [
    /*
    |--------------------------------------------------------------------------
    | Default Storage Disk
    |--------------------------------------------------------------------------
    |
    | This option controls the default storage disk that will be used to store
    | uploaded images. You may set this to any of the disks defined in your
    | config/filesystems.php configuration file.
    */
    'disk' => env('IMAGE_CROPPER_DISK', 'public'),

    /*
    |--------------------------------------------------------------------------
    | Default Folder
    |--------------------------------------------------------------------------
    |
    | This is the default folder where uploaded images will be stored.
    */
    'default_folder' => env('IMAGE_CROPPER_FOLDER', 'uploads/images'),

    /*
    |--------------------------------------------------------------------------
    | Default Image Format
    |--------------------------------------------------------------------------
    |
    | This option controls the default format for saved images.
    | Supported: 'webp', 'jpg', 'png', 'original'
    */
    'default_format' => env('IMAGE_CROPPER_FORMAT', 'webp'),

    /*
    |--------------------------------------------------------------------------
    | Default Image Quality
    |--------------------------------------------------------------------------
    |
    | This option controls the default quality for saved images (0-100).
    */
    'default_quality' => env('IMAGE_CROPPER_QUALITY', 90),

    /*
    |--------------------------------------------------------------------------
    | Client-Side Only Mode
    |--------------------------------------------------------------------------
    |
    | When enabled, images are only cropped client-side and sent as base64
    | without server upload. When disabled, images are uploaded to server.
    */
    'client_side_only' => env('IMAGE_CROPPER_CLIENT_SIDE_ONLY', true),

    /*
    |--------------------------------------------------------------------------
    | Auto-Process Form Inputs
    |--------------------------------------------------------------------------
    |
    | When enabled, automatically processes all form inputs with
    | class "image-cropper" and transforms them into cropping interfaces.
    */
    'auto_process_forms' => env('IMAGE_CROPPER_AUTO_PROCESS', true),

    /*
    |--------------------------------------------------------------------------
    | Default Aspect Ratios
    |--------------------------------------------------------------------------
    |
    | This option defines the default aspect ratios available for selection.
    | Use 'Free' for free cropping (no fixed ratio).
    */
    'default_ratios' => [
        'Free' => null,
        'Square 1:1' => 1,
        'Landscape 16:9' => 16/9,
        'Portrait 9:16' => 9/16,
        '4:3' => 4/3,
        '3:2' => 3/2,
    ],

    /*
    |--------------------------------------------------------------------------
    | Upload Route
    |--------------------------------------------------------------------------
    |
    | This option defines the route for image uploads (when not in client-side mode).
    */
    'upload_route' => env('IMAGE_CROPPER_UPLOAD_ROUTE', '/image-upload'),
];
```

---

🚀 Usage Examples
----------------

[](#-usage-examples)

### Method 1: Auto-Transform (Easiest)

[](#method-1-auto-transform-easiest)

Simply add `image-cropper` class to any file input:

```

    @csrf

        Profile Image

    Submit

```

### Method 2: Blade Component (Recommended)

[](#method-2-blade-component-recommended)

Use the included Blade component for more control:

```

            @csrf

                Cover Image

                Select and crop your cover image

            Submit

```

### Method 3: Server-Side Upload Controller

[](#method-3-server-side-upload-controller)

If not using client-side mode, create a controller:

```