README

此包为Nova资源提供高级图像字段，允许您上传、裁剪和缩放任何图像。

它在前端使用Cropper.js和vue-cropperjs，在后台使用Intervention Image。

要求

为了正确工作，此包需要以下组件

• Laravel & Nova (2或3)
• Fileinfo 扩展

以及以下库之一

• GD库 >=2.0（默认使用）
• Imagick PHP扩展 >=6.5.7

有关更多详细信息，请参阅Intervention要求。

安装

使用Composer将包安装到使用Nova的Laravel应用程序中

composer require ctessier/nova-advanced-image-field

如果您想将Imagick作为默认图像处理库，请遵循Intervention Laravel文档。这将为您提供一个新的配置文件，您可以在其中指定您想要的驱动程序。

用法

AdvancedImage继承自Image，因此您可以使用Image实现的任何方法。请参阅此处的文档。

<?php

namespace App\Nova;

// ...
use Illuminate\Http\Request;
use Ctessier\NovaAdvancedImageField\AdvancedImage;

class Post extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            // ...

            // Simple image upload
            AdvancedImage::make('Photo'),

            // Show a cropbox with a free ratio
            AdvancedImage::make('Photo')->croppable(),

            // Show a cropbox with a fixed ratio
            AdvancedImage::make('Photo')->croppable(16/9),

            // Resize the image to a max width
            AdvancedImage::make('Photo')->resize(1920),

            // Resize the image to a max height
            AdvancedImage::make('Photo')->resize(null, 1080),

            // Show a cropbox and resize the image
            AdvancedImage::make('Photo')->croppable()->resize(400, 300),

            // Override the image processing driver for this field only
            AdvancedImage::make('Photo')->driver('imagick')->croppable(),

            // Store to AWS S3
            AdvancedImage::make('Photo')->disk('s3'),

            // Specify a custom subdirectory
            AdvancedImage::make('Photo')->croppable()->disk('s3')->path('image'),

            // Store custom attributes
            AdvancedImage::make('Photo')->croppable()->store(function (Request $request, $model) {
                return [
                    'photo' => $request->photo->store('/', 's3'),
                    'photo_mime' => $request->photo->getMimeType(),
                    'photo_name' => $request->photo->getClientOriginalName(),
                ];
            }),
        ];
    }
}

resize选项使用带有缩放和宽高比约束的Intervention Image resize()。