64robots / nova-image-cropper by 64robots

A Laravel Nova field.
221,956
57
2
Package Data
Maintainer Username: 64robots
Package Create Date: 2018-08-31
Package Last Update: 2023-03-04
Home Page:
Language: Vue
License: MIT
Last Refreshed: 2024-03-28 03:14:50
Package Statistics
Total Downloads: 221,956
Monthly Downloads: 4,087
Daily Downloads: 153
Total Stars: 57
Total Watchers: 2
Total Forks: 15
Total Open Issues: 20

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.

Demo

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"