ImageCropper

Based on Croppie JS

Requirements

• @stack('styles') in the head of your app layout,

• @stack('scripts') after Livewire and AlpineJS script tags.

• Based on Croppie JS, https://github.com/Foliotek/Croppie

Preview

Component

Headless

Styles

Existing files

This field loads an existing image if it is a valid image url. It is up to you to load the field correctly and save the field value as a valid url.

updatedFoo() - update existing images

• The hook is emitted when an existing image is deleted.

• The ImageCropper generates a base64 png

public function updatedFoo($value)
{
    if(filled($value)) {
        // $value = png base64 image
        // a new image was added, save it
    }
    if(blank($value)) {
        // an existing image was deleted, remove it from the model and storage
    }
}

Additional methods

->dropZoneHelp(string $text)

->fileInfo(string $text)

->uploadButton(string $text)

->includeExternalScripts()

• Pushes (once) external (cdn-links) for required scripts and styles to your layout

• Not included by default

• Omit this method if you import the scripts yourself, https://github.com/Foliotek/Croppie

->thumbnail(string $class)

• Image preview size (class) in relation to its container.

• Default = w-full h-full.

->width(int $pixels)

• Cropper width in pixels

->height(int $pixels)

• Cropper height in pixels

->circle()

• Circular cropper shape

->square()

• Square cropper shape