r64 / nova-image-cropper
A Laravel Nova field.
Fund package maintenance!
beliolfa
Installs: 254 514
Dependents: 0
Suggesters: 0
Security: 0
Stars: 57
Watchers: 2
Forks: 16
Open Issues: 20
Language:Vue
Requires
- php: >=7.1.0
- dev-master
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- dev-dependabot/npm_and_yarn/minimist-1.2.8
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/express-4.18.2
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/eventsource-1.1.1
- dev-dependabot/npm_and_yarn/async-2.6.4
- dev-dependabot/npm_and_yarn/url-parse-1.5.10
- dev-dependabot/npm_and_yarn/ajv-6.12.6
This package is auto-updated.
Last update: 2024-11-04 06:56:01 UTC
README
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.
Demo
Install
Run this command into your nova project:
composer require r64/nova-image-cropper
Add it to your Nova Resource:
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.
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
ImageCropper::make('Photo')->avatar()
Custom aspect ratio
Define the fixed aspect ratio of the crop box.
- Type: Number
- Default: NaN
ImageCropper::make('Photo')->aspectRatio(16/9)
For free ratio use:
ImageCropper::make('Photo')->aspectRatio(0)
Localization
Set your translations in the corresponding xx.json file located in /resources/lang/vendor/nova
... "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"