PHP code example of pjedesigns / filament-image-editor

1. Go to this page and download the library: Download pjedesigns/filament-image-editor library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

pjedesigns / filament-image-editor example snippets


use Pjedesigns\FilamentImageEditor\Forms\Components\ImageEditor;

public static function form(Form $form): Form
{
    return $form->schema([
        ImageEditor::make('avatar')
            ->label('Profile Picture')
            ->

ImageEditor::make('photo')
    ->disk('public')
    ->directory('photos')
    ->visibility('public')
    ->shouldPreserveFilenames()  // Keep original filename (slugified)

ImageEditor::make('photo')
    ->shouldPreserveFilenames()  // "My Vacation Photo.PNG" → "my-vacation-photo.jpg"

> // In your Model
> public function registerMediaCollections(): void
> {
>     $this->addMediaCollection('avatar')
>         ->singleFile();  // Required for ImageEditor
> }
> 

ImageEditor::make('photo')
    ->collection('photos')
    ->conversion('thumb')
    ->responsiveImages()
    ->customProperties(['source' => 'editor'])

use Illuminate\Database\Eloquent\Model;

ImageEditor::make('photo')
    ->collection('photos')
    ->customProperties(fn (?Model $record) => [
        'custom_property'  => $record?->custom_property ?: (string) 'default',
        'source'       => 'editor',
    ]);

ImageEditor::make('image')
    ->openOnSelect(true)    // Open editor immediately when file selected (default)
    ->openOnSelect(false)   // Skip editor - upload image directly, edit later via "Edit" button
    ->modalSize('6xl')      // Modal size (sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full)
    ->tools(['crop', 'filter', 'draw'])  // Available tools
    ->previewMaxHeight(400) // Maximum height for image preview in pixels (default: 400)

ImageEditor::make('image')
    ->cropAspectRatios([
        'free' => null,
        '1:1' => 1,
        '16:9' => 16/9,
        'cinematic' => 2.35,
    ])
    ->defaultAspectRatio('16:9')
    ->cropMinSize(width: 100, height: 100)
    ->cropMaxSize(width: 4000, height: 4000)
    ->enableRotation(true)
    ->enableFlip(true)

ImageEditor::make('image')
    ->filterPresets([
        'original', 'grayscale', 'sepia', 'vintage',
        'warm', 'cool', 'dramatic', 'fade', 'vivid',
    ])
    ->adjustments(['brightness', 'contrast', 'saturation'])
    ->disableFilters()      // Only show adjustments
    ->disableAdjustments()  // Only show filter presets

ImageEditor::make('image')
    ->drawingTools(['select', 'freehand', 'eraser', 'line', 'arrow', 'rectangle', 'ellipse', 'text'])
    ->defaultStrokeColor('#FF0000')
    ->defaultStrokeWidth(4)
    ->defaultFillColor('transparent')
    ->colorPalette([
        '#FFFFFF', '#000000', '#FF0000', '#00FF00', '#0000FF',
    ])
    ->fonts(['Arial', 'Helvetica', 'Georgia'])
    ->disableDrawing()  // Remove drawing tool entirely

ImageEditor::make('image')
    ->outputFormat('webp')      // jpeg, png, webp
    ->outputQuality(0.85)       // 0.0 to 1.0
    ->maxOutputSize(width: 2000, height: 2000)

ImageEditor::make('image')
    ->acceptedFileTypes(['image/jpeg', 'image/png', 'image/webp'])
    ->maxFileSize(5 * 1024)     // 5MB in KB
    ->minDimensions(width: 800, height: 600)  // Warning threshold

ImageEditor::make('image')
    ->historyLimit(50)
    ->enableKeyboardShortcuts(true)

return [
    'storage' => [
        'disk' => 'public',
        'directory' => 'images',
        'visibility' => 'public',
    ],

    'output' => [
        'format' => 'jpeg',
        'quality' => 0.92,
    ],

    'ui' => [
        'preview_max_height' => 400,  // Max height for image preview in pixels
    ],

    'tools' => ['crop', 'filter', 'draw'],

    'crop' => [
        'aspect_ratios' => [
            'free' => null,
            '1:1' => 1,
            '4:3' => 4/3,
            '16:9' => 16/9,
        ],
        'enable_rotation' => true,
        'enable_flip' => true,
    ],

    // ... more options
];
bash
php artisan vendor:publish --tag="filament-image-editor-config"