Laravel Filament实现上传前图片自定义裁剪的方法咨询

Filament原生的FileUpload::imageCropAspectRatio()确实是在上传后由后台自动按比例裁剪，无法让用户自主选择区域。要实现类似Cropper.js的前端裁剪体验，需要自定义表单组件，整合前端裁剪逻辑后再上传裁剪后的图片。

以下是可行的实现步骤：

1. 自定义CroppableFileUpload组件 #

先创建一个继承自Filament原生FileUpload的自定义组件，禁用原生自动裁剪，添加自定义裁剪比例配置：

namespace App\Filament\Components;

use Filament\Forms\Components\FileUpload;

class CroppableFileUpload extends FileUpload
{
    protected string $view = 'filament.components.croppable-file-upload';
    protected string $cropAspectRatio = '1:1';

    public function cropAspectRatio(string $ratio): static
    {
        $this->cropAspectRatio = $ratio;
        return $this;
    }

    protected function setUp(): void
    {
        parent::setUp();
        $this->disableImageCrop() // 关闭后台自动裁剪
             ->image(); // 限制仅接受图片
    }

    public function getViewData(): array
    {
        return array_merge(parent::getViewData(), [
            'cropAspectRatio' => $this->cropAspectRatio,
        ]);
    }
}

2. 编写组件视图，整合Cropper.js #

创建视图文件resources/views/filament/components/croppable-file-upload.blade.php，实现前端裁剪逻辑：

<div
    x-data="{
        isCropping: false,
        cropper: null,
        selectedFile: null,
        initCropper(file) {
            this.selectedFile = file;
            const imgEl = document.createElement('img');
            imgEl.src = URL.createObjectURL(file);
            
            imgEl.onload = () => {
                this.isCropping = true;
                $nextTick(() => {
                    this.cropper = new Cropper(imgEl, {
                        aspectRatio: {{ str_replace(':', '/', $cropAspectRatio) }},
                        viewMode: 1,
                        autoCropArea: 0.8,
                        movable: true,
                        zoomable: true
                    });
                    document.getElementById('cropper-wrap').appendChild(imgEl);
                });
            };
        },
        confirmCrop() {
            if (!this.cropper) return;
            
            this.cropper.getCroppedCanvas().toBlob((blob) => {
                // 生成裁剪后的文件对象
                const croppedFile = new File([blob], this.selectedFile.name, { 
                    type: this.selectedFile.type 
                });
                
                // 替换原生上传输入的文件，触发上传
                const input = $refs.uploadInput;
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(croppedFile);
                input.files = dataTransfer.files;
                input.dispatchEvent(new Event('change'));
                
                // 清理裁剪实例
                this.cropper.destroy();
                this.isCropping = false;
                document.getElementById('cropper-wrap').innerHTML = '';
            });
        }
    }"
>
    {{-- 原生FileUpload输入框 --}}
    <x-filament::form.components.file-upload
        :component="$component"
        x-ref="uploadInput"
        @change="initCropper($event.target.files[0])"
    />

    {{-- 裁剪预览容器 --}}
    <div id="cropper-wrap" class="mt-4 border rounded p-2 hidden" x-show="isCropping"></div>

    {{-- 确认裁剪按钮 --}}
    <x-filament::button
        class="mt-2"
        x-show="isCropping"
        @click="confirmCrop"
    >
        确认裁剪并上传
    </x-filament::button>
</div>

3. 引入Cropper.js资源 #

本地引入Cropper.js的JS和CSS：

• 通过npm安装：npm install cropperjs
• 在Filament自定义JS文件中导入：

// resources/js/filament-custom.js
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

window.Cropper = Cropper;

• 在Filament服务提供者中注册该脚本：

// app/Providers/FilamentServiceProvider.php
public function boot(): void
{
    parent::boot();
    
    Filament::registerScripts([
        asset('js/filament-custom.js'),
    ], true);
}

• 编译JS资源：npm run build

4. 在表单中使用自定义组件 #

替换原有的FileUpload为自定义组件：

use App\Filament\Components\CroppableFileUpload;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            CroppableFileUpload::make('image')
                ->cropAspectRatio('1:1')
                ->disk('public')
                ->directory('user-avatars'),
        ]);
}

优化建议 #

• 添加取消裁剪按钮，允许用户重新选择图片
• 支持动态调整裁剪比例，添加下拉选项让用户切换比例
• 对大图片进行前端压缩，减少上传体积
• 适配移动端，优化Cropper的触摸交互

内容的提问来源于stack exchange，提问作者Ameise