README

安装

您可以通过 composer 安装此包（不需要单独安装 croppie，因为其资源已包含在内）

composer require josefbehr/filament-spatie-media-library-croppie

要在外部使用 filament（例如，仅与表单包一起使用），请将 js 和 css 添加到您的 vite（或 mix）配置中

@vite([
    'vendor/josefbehr/filament-spatie-media-library-croppie/resources/dist/js/filament-spatie-media-library-croppie.js',
    'vendor/josefbehr/filament-spatie-media-library-croppie/resources/dist/css/filament-spatie-media-library-croppie.css',
    ...
])

此字段扩展了，因此具有 Filament Spatie Media Library 插件 字段的全部功能。

SpatieMediaLibraryCroppie::make('image')
    ->boundaryWidth('100%')
    ->boundaryHeight('600'),

使用 boundaryWidth 和 boundaryHeight 设置模态中图像区域的宽度和高度。上面的值是默认值。

SpatieMediaLibraryCroppie::make('image')
    ->viewportWidth('400')
    ->viewportHeight('400'),

使用 viewportWidth 和 viewportHeight 设置裁剪器的宽度和高度。上面的值是默认值。

SpatieMediaLibraryCroppie::make('image')
    ->showZoomer(),

showZoomer 可以调用以在模态中显示图像下方的缩放条。

SpatieMediaLibraryCroppie::make('avatar')
    ->avatar(),

我们可以使用 avater 方法将 croppie 设置为圆形。

Croppie::make('background')
    ->modalSize('6xl')
    ->modalHeading("Crop Background Image")

可以使用 modalSize 方法自定义模态大小。要设置标题，请使用 modalHeading。

设置图像质量和格式

如果您的裁剪图像非常大（参见：[Foliotek/Croppie#444]），您可以使用 imageFormat() 和 imageQuality() 方法修改结果图像。

SpatieMediaLibraryCroppie::make('image')
    ->imageFormat('jpeg')
    ->imageQuality(0.7);

默认值是

• imageQuality(0.9)
• imageFormat('png')

许可协议

MIT 许可协议（MIT）。有关更多信息，请参阅 许可文件。

致谢

这最初是 nuhel/FilamentCroppie 的分支，扩展并修改以使用 spatie/media-library，并通过 npm 安装 croppie。

变更日志

v1.0.4

• 添加 imageFormat 和 imageQuality 选项/方法

v1.0.3

• 重新捆绑 croppie 资产与插件资产，因为似乎在某些情况下不这样做无法正常工作

v1.0.0

• 分支 nuhel/filament-croppie 并重命名一切，扩展 spatie 插件表单字段
• 删除 croppie css 和 js，并从 node_modules 重新导入它们
• 添加 viewportWidth/Height 和 boundaryWidth/Height 方法