声音市场/nova-image-cropper

由声音市场修改的 Laravel Nova 字段。

资助包维护!
beliolfa

安装: 23

依赖者: 0

建议者: 0

安全: 0

星星: 0

关注者: 0

分支: 16

语言:Vue

1.1.6 2021-11-29 11:45 UTC

This package is auto-updated.

Last update: 2024-09-29 05:29:21 UTC


README

‼️ 这是从以下 分支出来的。

此字段扩展了图像字段,并添加了一个便捷的裁剪器来操作图像。可以像 Nova 中的 文件字段 一样进行配置。

演示

Demo

安装

在您的 nova 项目中运行此命令: composer require soundsmarket/nova-image-cropper

将其添加到您的 Nova 资源中

use SoundsMarket\NovaImageCropper\ImageCropper;

ImageCropper::make('Photo'),

更新表单

为了编辑模型中保存的现有图像,ImageCroper 使用预览方法返回一个 base64 编码的图像。您可以使用默认实现或覆盖它,只要返回一个 base64 图像即可。

use SoundsMarket\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));
        });

选项

头像模式

您可以为预览和裁剪器添加圆形遮罩

ImageCropper::make('Photo')->avatar()

自定义纵横比

定义裁剪框的固定纵横比。

  • 类型:数字
  • 默认:NaN
ImageCropper::make('Photo')->aspectRatio(16/9)

用于免费比例

ImageCropper::make('Photo')->aspectRatio(0)

本地化

/resources/lang/vendor/nova 目录中找到相应的 xx.json 文件设置您的翻译。

...

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