Symfony UX Cropper.js

编辑此页

Symfony UX Cropper.js 是一个 Symfony 扩展包，集成了 Cropper.js 库到 Symfony 应用程序中。它是 Symfony UX initiative 的一部分。

安装

注意

在开始之前，请确保你的应用中已配置 StimulusBundle。

使用 Composer 和 Symfony Flex 安装扩展包

        1
        $ composer require symfony/ux-cropperjs
    

如果你正在使用 WebpackEncore，安装你的 assets 并重启 Encore (如果你正在使用 AssetMapper 则不需要)

        1
2
        $ npm install --force
$ npm run watch
    

使用方法

要使用 Symfony UX Cropper.js，注入 CropperInterface 服务，创建一个 Crop 对象，并在标准表单中使用此对象

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
        // ...
use Symfony\Component\HttpFoundation\Request;
use Symfony\UX\Cropperjs\Factory\CropperInterface;
use Symfony\UX\Cropperjs\Form\CropperType;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    public function index(CropperInterface $cropper, Request $request): Response
    {
        $crop = $cropper->createCrop('/server/path/to/the/image.jpg');
        $crop->setCroppedMaxSize(2000, 1500);

        $form = $this->createFormBuilder(['crop' => $crop])
            ->add('crop', CropperType::class, [
                'public_url' => '/public/url/to/the/image.jpg',
                'cropper_options' => [
                    'aspectRatio' => 2000 / 1500,
                ],
            ])
            ->getForm()
        ;

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // Get the cropped image data (as a string)
            $crop->getCroppedImage();

            // Create a thumbnail of the cropped image (as a string)
            $crop->getCroppedThumbnail(200, 150);

            // ...
        }

        return $this->render('home/index.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}
    

这些 cropper_options 可以是任何 Cropper.js 选项。

一旦在 PHP 中创建，裁剪表单就是一个普通表单，这意味着你可以像通常使用任何表单一样使用 Twig 显示它

        1
        {{ form(form) }}
    

扩展默认行为

Symfony UX Cropper.js 允许你使用自定义 Stimulus 控制器扩展其默认行为

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
        // mycropper_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('cropperjs:pre-connect', this._onPreConnect);
        this.element.addEventListener('cropperjs:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('cropperjs:connect', this._onConnect);
        this.element.removeEventListener('cropperjs:pre-connect', this._onPreConnect);
    }

    _onPreConnect(event) {
        // The cropper has not yet been created and options can be modified
        console.log(event.detail.options);
        console.log(event.detail.img);
    }

    _onConnect(event) {
        // The cropper was just created and you can access details from the event
        console.log(event.detail.cropper);
        console.log(event.detail.options);
        console.log(event.detail.img);

        // For instance you can listen to additional events
        event.detail.img.addEventListener('cropend', function () {
            // ...
        });
    }
}
    

然后在你的表单中，将你的控制器添加为 HTML 属性

        1
2
3
4
5
6
7
8
9
10
        $form = $this->createFormBuilder(['crop' => $crop])
    ->add('crop', CropperType::class, [
        'public_url' => '/public/url/to/the/image.jpg',
        'cropper_options' => [
            'aspectRatio' => 2000 / 1800,
        ],
        'attr' => ['data-controller' => 'mycropper'],
    ])
    ->getForm()
;
    

向后兼容性承诺

此扩展包旨在遵循与 Symfony 框架相同的向后兼容性承诺：http://symfony.ac.cn/doc/current/contributing/code/bc.html

这项工作，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。

版本