README

概览

PrestaImageBundle 是一个 Symfony 扩展包，提供工具在通过经典表单发送之前调整上传和远程图片的大小。它使用 Cropper.js 库。

安装

确保已全局安装 Composer，如 Composer 文档的安装章节所述。

使用 Symfony Flex 的应用程序

打开命令行，进入您的项目目录并执行

$ composer require presta/image-bundle

未使用 Symfony Flex 的应用程序

步骤 1: 下载扩展包

打开命令行，进入您的项目目录并执行以下命令以下载此扩展包的最新稳定版本

$ composer require presta/image-bundle

步骤 2: 启用扩展包

然后，通过将其添加到项目 config/bundles.php 文件中注册的扩展包列表来启用扩展包

// config/bundles.php

return [
    // ...
    Presta\ImageBundle\PrestaImageBundle::class => ['all' => true],
];

配置

您必须在 config/packages/twig.yaml 中配置 form_layout.html.twig 表单主题。

twig:
    form_themes:
        - "@PrestaImage/form/form_layout.html.twig"

注意：您也可以创建自己的表单主题。

您必须在 config/routes.yaml 中包含路由

presta_image:
    resource: "@PrestaImageBundle/config/routing.yaml"

有关配置扩展包的说明，请参阅 VichUploader 文档

资源

有关安装资源的说明，请参阅 Cropper.js 文档

不要忘记在您的页面中包含以下资源

@PrestaImageBundle/public/css/cropper.css
@PrestaImageBundle/public/js/cropper.js

实现示例

Webpack Encore

用法

初始化裁剪器

document.querySelectorAll('.presta-image').forEach(element => {
    new Cropper(element)
})

使用表单类型

<?php

use Presta\ImageBundle\Form\Type\ImageType;

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('image', ImageType::class)
    ;
}

ImageType 的可用选项

aspect_ratios (数组)：调整图像大小时应用的宽高比列表
cropper_options (数组)：裁剪器支持的所有选项（默认：['autoCropArea' => 1]）
max_width (整数)：发送到服务器的裁剪图像的最大宽度（默认：320）
max_height (整数)：发送到服务器的裁剪图像的最大高度（默认：180）
preview_width (字符串)：显示图像预览时使用的最大宽度 - 可以是 px、% 或其他 CSS 值（默认：'320px'）
preview_height (字符串)：显示图像预览时使用的最大高度 - 可以是 px、% 或其他 CSS 值（默认：'180px'）
upload_button_class (字符串)："上传"按钮的 CSS 类（默认：''）
cancel_button_class (字符串)："取消"按钮的 CSS 类（默认：''）
save_button_class (字符串)："保存"按钮的 CSS 类（默认：''）
download_uri (字符串)：图像所在的路径（默认：null，自动设置）
show_image (布尔值)：是否应在表单中渲染图像（默认：true）
file_upload_enabled (布尔值)：是否启用文件上传小部件（默认：true）
remote_url_enabled (bool)：是否启用远程URL小部件（默认：true）
rotation_enabled (bool)：是否启用旋转（默认：false）
upload_mimetype (string)：上传图片的格式（默认：image/png）
(注意：如果选择的mimetype不被浏览器支持，它将静默回退到 image/png)
upload_quality (float)：有损图像格式（如image/jpeg）上传图片的质量（0..1）（默认：0.92）

备注

您可以在这里找到 Cropper.js 选项。

使用max_width和max_height选项来定义裁剪后上传的图片的最大尺寸。裁剪后的较大图片将被缩小。

安全提示：永远不要依赖这些尺寸限制和格式设置，因为它们很容易在客户端被操纵。始终在服务器端验证image-data、image-size、image-format！

贡献

欢迎提交拉取请求。

感谢已经做出贡献的所有人。

该项目由PrestaConcept支持

主要开发者： @J-Ben87

在MIT许可证下发布

presta / image-bundle

维护者

详细信息