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

//expects existing value to be a image file url
//use form-generator hook saveFoo()
ImageCropper::make('Single Image Cropper', 'single_base64')
    ->width(150)
    ->height(150)
    ->square()
    ->includeExternalScripts() //will only be included once if multiple imageCropper fields.
    ->thumbnail('w-1/4')
    ->dropZoneHelp('Drag an image here or click in this area');
    

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

saveFoo() - save the data

You must save the uploaded image your self. Read more about how to Manually save data

The ImageCropper generates a base64 png

Based on the example above, where the field key = single_base64

public function saveSingleBase64($base64png) {
    //validate and save as an image url on the model
}

//in Livewire component
public mixed $imageCropper = '';

//blade view
<x-tall-image-cropper :field="ImageCropper::blade('imageCropper')
    ->width(150)
    ->height(150)
    ->square()
    ->includeExternalScripts()
    ->thumbnail('w-1/4')
    ->dropZoneHelp('Drag an image here or click in this area')"
    :image-url="$imageCropper ?? 'https://picsum.photos/seed/picsum/400/200'"
/>

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

PreviousHoneypot NextInput

Last updated 4 years ago

Was this helpful?

hashtagRequirements

hashtagsaveFoo() - save the data

hashtagExisting files

hashtagupdatedFoo() - update existing images

hashtagAdditional methods

hashtag->dropZoneHelp(string $text)

hashtag->fileInfo(string $text)

hashtag->uploadButton(string $text)

hashtag->includeExternalScripts()

hashtag->thumbnail(string $class)

hashtag->width(int $pixels)

hashtag->height(int $pixels)

hashtag->circle()

hashtag->square()