# ImageCropper

### 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>

{% tabs %}
{% tab title="Preview" %}
![](https://3246461946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQWt7hBSh108moAc0Al%2F-Mf7NPf3cds5RpGCRfBm%2F-Mf7OEu5-QCkXgjfCgG8%2Fimage-cropper.gif?alt=media\&token=ea5a442d-5537-4626-adc3-31288de1f6c7)
{% endtab %}

{% tab title="Component" %}

```php
//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](https://tina-hammar.gitbook.io/tall-forms/concept/manually-saving-data)

The ImageCropper generates a base64 png

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

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

{% endtab %}

{% tab title="Headless" %}

```markup
//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'"
/>
```

{% endtab %}

{% tab title="Styles" %}
Search for `ImageCropper` in tall-theme.css
{% endtab %}
{% endtabs %}

### 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**

```php
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