ob娱乐下载Symfony UX Cropper.js

安装
使用
- 扩展默认行为
向后兼容性的承诺

ob娱乐下载Symfony UX Cropper.js

ob娱乐下载Symfony UX Cropper.jsis a Symfony bundle integrating theCropper.js在Symfony应用程ob娱乐下载序库。它的一部分Symfob娱乐下载ony的UX倡议。

安装

然后,安装这个包使用Flex作曲家和Symfony:ob娱乐下载

               1 2 3 4 5 6 7 8 9
               美元作曲家需要symfony / uxob娱乐下载-cropperjs#别忘了安装JavaScript依赖性和编译美元npm安装——力美元npm运行看#或用纱美元线安装,力美元纱看
              

也确保你有至少3.0版本@ob娱乐下载symfony / stimulus-bridge在你的package.json文件。

使用

使用Symfoob娱乐下载ny UX收割机。js,注入CropperInterface服务,创建一个作物对象,并使用这个对象在一个标准形式:

               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 41 42
               / /……使用ob娱乐下载\组件\HttpFoundation\请求;使用ob娱乐下载\用户体验\Cropperjs\形式\CropperType;使用ob娱乐下载\用户体验\Cropperjs\工厂\CropperInterface;类HomeController扩展AbstractController{/ * * * #(路线(“/”,名字:app_homepage)] * /公共函数指数(CropperInterface美元收割机,请求美元请求):响应{美元作物=美元收割机- >createCrop (' /服务器/道路/ / / image.jpg ');美元作物- >setCroppedMaxSize (2000年,1500年);美元形式=美元这- >createFormBuilder ([“作物”= >美元作物])- >add (“作物”,CropperType::类,“public_url”= >' /公共/ url / / / image.jpg ',“cropper_options”= > [“aspectRatio”= >2000年/1500年),)- >getForm ();美元形式- >handleRequest (美元请求);如果(美元形式- >isSubmitted () & &美元形式- >isValid ()) {/ /得到裁剪图像数据(一个字符串)美元作物- >getCroppedImage ();/ /创建一个裁剪的图像的缩略图(一个字符串)美元作物- >getCroppedThumbnail (200年,150年);/ /……}返回美元这- >呈现(家/ index.html.twig ',(“形式”= >美元形式- >createView ()));}}
              

这些cropper_options可以是任何收割机。js选项。

一旦创建在PHP中,一种作物是一个正常的形式,这意味着您可以使用树枝显示它通常会以任何形式:

               1
               {{形式(形式)}}
              

扩展默认行为

ob娱乐下载Symfony UX Cropper.jsallows you to extend its default behavior using a custom Stimulus controller:

                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进口{控制器}从“@hotwired /刺激”;出口默认的类扩展控制器{connect () {这.element.addEventListener (“cropperjs: pre-connect”,这._onPreConnect);这.element.addEventListener (“cropperjs:连接”,这._onConnect);(){}脱节/ /你应该删除侦听器控制器断开连接时避免副作用这.element.removeEventListener (“cropperjs: pre-connect”,这._onConnect);这.element.removeEventListener (“cropperjs:连接”,这._onConnect);}_onPreConnect(事件){/ /农作物尚未创建和选项可以修改控制台. log (event.detail.options);控制台. log (event.detail.img);}_onConnect(事件){/ /收割机刚刚创建,您可以访问从事件的细节控制台. log (event.detail.cropper);控制台. log (event.detail.options);控制台. log (event.detail.img);/ /例如可以听其他事件event.detail.img.addEventListener (“cropend”,函数(){/ /……});}}
               

在表单中,添加控制器作为一个HTML属性:

                1 2 3 4 5 6 7 8 9 10
                美元形式=美元这- >createFormBuilder ([“作物”= >美元作物])- >add (“作物”,CropperType::类,“public_url”= >' /公共/ url / / / image.jpg ',“cropper_options”= > [“aspectRatio”= >2000年/1800年),“attr”= > [“数据控制器”= >“mycropper”),)- >getForm ();
               