README

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

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

那么，在您到达数据库/S3存储桶之前转换并减小图像(们)会怎样呢？特别是您知道您永远不需要保存用户上传的原始图像大小时。

🤳 这就是Filament Image Optimizer发挥作用的地方。

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

内容

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

安装

您可以通过composer安装此包，它目前适用于最新的Filament版本(^3.2)和Laravel 10 & 11

composer require joshembling/image-optimizer

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

composer require joshembling/image-optimizer:v1.2

使用

Filament版本

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

有关与您的PHP、Laravel、Filament和Image Optimizer安装相匹配的特定版本，请参阅下表

服务器

GD库必须安装到您的服务器上才能压缩图像。

优化图像

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

例如，我想将我的图像转换为'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，以便您的lock文件与您的composer.json同步。
您可能会看到“等待大小”消息和组件上的无限加载状态，这可能是CORS问题造成的。这可以通过确保您从同一域名提供服务和使用上传图像快速解决。检查您的JavaScript控制台以获取更多信息。

更改日志

有关最近更改的更多信息，请参阅更改日志。

贡献

请参阅CONTRIBUTING以获取详细信息。

安全漏洞

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

致谢

许可

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

joshembling / image-optimizer

维护者

详细信息