Symfony UX Cropper.js

編輯此頁面

Symfony UX Cropper.js 是一個 Symfony 套件，將 Cropper.js 函式庫整合到 Symfony 應用程式中。它是 Symfony UX 計畫的一部分。

安裝

注意

在開始之前，請確保您的應用程式中已設定 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 框架相同的向後相容性承諾：https://symfony.dev.org.tw/doc/current/contributing/code/bc.html

本作品，包括程式碼範例，皆以創用 CC BY-SA 3.0 授權條款釋出。

版本