README

当您目前使用本地 Filament 组件 FileUpload 上传图像时，原始文件将保存，没有任何压缩或转换。

此外，如果您上传图像并使用 SpatieMediaLibraryFileUpload 进行转换，原始文件将保存与您的模型上提供的相应版本相对应。

如果您想在到达数据库/S3 存储桶之前转换和缩小图像（s）怎么办？尤其是在您知道永远不需要保存用户上传的原始图像尺寸的情况下。

🤳 这正是 Filament 图像优化器发挥作用的地方。

您使用与之前相同的功能组件，并可以访问两个额外的优化方法，从而在过程中节省大量磁盘空间。 🎉

内容

内容
安装
使用
变更日志
贡献
安全漏洞
致谢
许可证

安装

您可以通过 composer 安装此包，目前它与最新的 Filament 版本 (^3.2) 兼容

composer require joshembling/image-optimizer

如果您正在使用 Filament 3.0 或 3.1，请使用以下方式安装

composer require joshembling/image-optimizer:v1.2

使用

Filament 版本

您必须使用 Filament v3.x 才能访问此插件。

请参阅下表以获取与您的 Filament 和 Image Optimizer 安装匹配的特定版本

服务器

GD Library 必须安装在您的服务器上以压缩图像。

优化图像

在上传您的图像之前，您可以选择将其转换为所选格式以优化它。保存到您磁盘的文件将是转换后的版本。

例如，我想将我的图像转换为 'webp'。

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')
    ->image()
    ->optimize('webp'),

您可以使用 SpatieMediaLibraryFileUpload 做完全相同的事情

use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

SpatieMediaLibraryFileUpload::make('attachment')
    ->image()
    ->optimize('webp'),

调整图像大小

您还可以通过传入要减少的百分比来调整图像大小。这将保持纵横比。

例如，我想将我的图像（1280px x 720px）减少 50%

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')
    ->image()
    ->resize(50),

上传的图像大小是 640px x 360px。

您也可以使用 SpatieMediaLibraryFileUpload 做同样的事情

use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

SpatieMediaLibraryFileUpload::make('attachment')
    ->image()
    ->resize(50),

组合方法

您可以将这两种方法结合起来进行最大优化。

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')
	->image()
	->optimize('webp')
	->resize(50),

use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

SpatieMediaLibraryFileUpload::make('attachment')
    ->image()
	->optimize('webp')
    ->resize(50),

多张图像

您也可以对多张图像这样做 - 所有图像都将转换为相同的格式，并使用传入的相同百分比进行减小。只需在您的上传上链式调用 multiple() 即可

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')
    ->image()
	->multiple()
	->optimize('jpg')
    ->resize(50),

use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

SpatieMediaLibraryFileUpload::make('attachment')
    ->image()
	->multiple()
	->optimize('jpg')
    ->resize(50),

示例

调试

如果您看到 '未找到' 异常，包括 "方法 optimize" 或 "方法 resize"，请确保您已运行 composer update，以便您的锁定文件与您的 composer.json 保持同步。
您可能会看到 '等待大小' 消息和组件上的无限加载状态，这可能是 CORS 问题的原因。这可以通过确保您从同一域名提供和上传图像来解决。请检查您的 JavaScript 控制台以获取更多信息。

变更日志

请参阅 CHANGELOG 以获取有关最近更改的更多信息。

贡献

有关详细信息，请参阅 CONTRIBUTING。

安全漏洞

请查阅我们的安全策略如何报告安全漏洞。

致谢

许可协议

MIT 许可协议（MIT）。请参阅许可文件以获取更多信息。

adman9000 / image-optimizer

维护者

详细信息