README

此包旨在使用您表单中的用户友好界面创建图像裁剪。它使用 fengyuanchen/cropper jQuery 插件和 it-blaster/uploadable-bundle 来处理图像上传。

安装

将 it-blaster/crop-bundle 添加到您的 composer.json 文件中，并运行 composer

...
"require": {
    "it-blaster/crop-bundle": "1.0.*"
}
...

在您的 AppKernel.php 中注册该包

...
new Fenrizbes\CropBundle\FenrizbesCropBundle(),
...

配置 it-blaster/uploadable-bundle

使用方法

1. 在 schema.xml 中为您的表单配置 CroppableBehavior

...
    <behavior name="croppable">
        <parameter name="columns" value="first_image, second_image" />
    </behavior>
...

参数 columns 必须包含一个或多个您希望应用此行为的列名（默认值：image）。如果您的表单包含其他文件列并且您使用 UploadableBundle 来处理它们，请不要担心：此包自动将其列添加到 UploadableBehavior 配置中。

CroppableBehavior 为每个配置的列创建两个方法：setCroppable<column_name> 和 getCroppable<column_name>。（例如，如果您如上配置了行为，则将在您的基模型中创建以下方法：setCroppableFirstImage、getCroppableFirstImage、setCroppableSecondImage 和 getCroppableSecondImage）。如果您想设置 croppable FormType 或获取裁剪图像，则必须使用这些方法。

2. 在您的页面中包含包的资源

• bundles/fenrizbescrop/lib/js/cropper.min.js - 裁剪插件
• bundles/fenrizbescrop/lib/css/cropper.min.css - 裁剪样式
• bundles/fenrizbescrop/js/croppable.js - 包的脚本

另外，请记住，此包不包含裁剪插件所需的 JQuery 库。

3. 配置您的表单

...
    ->add('CroppableFirstImage', 'croppable', array(
        'width'  => 250,
        'height' => 250
    ))
...

此结构为您的表单中的图片添加了裁剪控件。必需的参数 width 和 height 设置了裁剪区域的最小尺寸。您可以在相关部分中了解更多关于 croppable FormType 的配置信息。

上传图像后，您将看到带有裁剪区域的图像。现在您可以选择图像的一部分并保存裁剪坐标。

4. 此包包含一个 twig 过滤器 crop，它为您提供获取裁剪图像的能力

...
<img src="{{ asset(item.croppableFirstImage | crop) }}" />
...

如果您为一张图片配置了多个裁剪，您可以传递您想要裁剪的裁剪索引

...
<img src="{{ asset(item.croppableFirstImage | crop(1)) }}" />
...

CroppableFormType 配置

您可以传递给 croppable 字段的全套特定参数如下

...
    ->add('CroppableSecondImage', 'croppable', array(
        'label'             => 'Image crops',
        'width'             => 250,
        'height'            => 250,
        'validate'          => false,
        'max_canvas_width'  => 600,
        'max_canvas_height' => 600,
        'instances'         => array(
            array(
                'label'  => 'First crop',
                'width'  => 200,
                'height' => 250
            ),
            array(
                'label'  => 'Second crop',
                'width'  => 100,
                'height' => 100
            )
        )
    ))
...

label

这不是一个特定参数，但您需要知道这个标签会显示在所有字段控件之前。

width 和 height

确定裁剪区域的默认最小尺寸。您不能选择小于最小尺寸的图像部分。

validate

此参数启用或禁用图像文件的验证。验证约束包括对 mime-type 的检查（只允许 gif、png 和 jpg 格式）以及对最小图片尺寸的检查（图像不能小于其裁剪中最大的尺寸）。默认值：true。

max_canvas_width 和 max_canvas_height

这两个值确定将原始图像和裁剪控件插入其中的画布的最大尺寸。原始图像将按比例缩放。如果您想禁用此限制，请将此选项设置为 0 或 false。默认值：640 和 480 像素。

实例

instances 是一个非常重要的选项。默认情况下，每张图像只有一个裁剪。但如果你想要对一张图像进行更多不同的裁剪，你可以在该选项中配置它们。它必须是一个数组数组。每个数组描述一个裁剪实例，并接受三个可选参数

• label - 该裁剪的标签（默认 null）
• width 和 height - 该裁剪区域的最低尺寸（默认情况下，它们继承基础 width 和 height 的值）

待办事项

• 删除之前生成的和当前未使用的裁剪