https://github.com/64robots/nova-image-cropper
Image Field with built-in cropper for Laravel Nova
https://github.com/64robots/nova-image-cropper
Last synced: 2 months ago
JSON representation
Image Field with built-in cropper for Laravel Nova
- Host: GitHub
- URL: https://github.com/64robots/nova-image-cropper
- Owner: 64robots
- Created: 2018-08-31T15:36:50.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:29:51.000Z (over 3 years ago)
- Last Synced: 2025-02-16T12:29:56.460Z (over 1 year ago)
- Language: Vue
- Homepage:
- Size: 2.04 MB
- Stars: 57
- Watchers: 2
- Forks: 16
- Open Issues: 20
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Image Field with built-in cropper for Laravel Nova
This field extends Image Field adding a handy cropper to manipulate images. Can be configurable in the same way as a [File field in Nova](https://nova.laravel.com/docs/1.0/resources/file-fields.html).
### Demo
### Install
Run this command into your nova project:
`composer require r64/nova-image-cropper`
### Add it to your Nova Resource:
```php
use R64\NovaImageCropper\ImageCropper;
ImageCropper::make('Photo'),
```
### Update form
In order to edit the existing image saved in the model, ImageCroper uses the preview method to return a base64 encoded image. You can either use the default implementation or override it as long as you return a base64 image.
```php
use R64\NovaImageCropper\ImageCropper;
ImageCropper::make('Photo')
->preview(function () {
if (!$this->value) return null;
$url = Storage::disk($this->disk)->url($this->value);
$filetype = pathinfo($url)['extension'];
return 'data:image/' . $filetype . ';base64,' . base64_encode(file_get_contents($url));
});
```
### Options
#### Avatar mode
You can add a rounded mask to the preview and the cropper
```php
ImageCropper::make('Photo')->avatar()
```
#### Custom aspect ratio
Define the fixed aspect ratio of the crop box.
- Type: Number
- Default: NaN
```php
ImageCropper::make('Photo')->aspectRatio(16/9)
```
For free ratio use:
```php
ImageCropper::make('Photo')->aspectRatio(0)
```
### Localization
Set your translations in the corresponding xx.json file located in `/resources/lang/vendor/nova`
```php
...
"Edit Image": "Editar Imagen",
"Cancel Crop": "Cancelar Recorte",
"Change Image": "Cambiar Imagen",
"Done": "Hecho",
"Click here or drop the file to upload": "Click aquí o arrastra el archivo para comenzar la subida"
```