欧宝娱乐app下载地址Symfony UX Cropper.js

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

欧宝娱乐app下载地址Symfony UX Cropper.js

欧宝娱乐app下载地址Symfony UX Cropper.js是一个Symfony bundle，集成了Cropper.jsSymfony应用程序欧宝娱乐app下载地址中的库。它是Symf欧宝娱乐app下载地址ony UX计划．

安装

在你开始之前，确保你有欧宝娱乐app下载地址在你的应用中配置Symfony UX．

然后，使用Composer和Symfony Flex安装这个包:欧宝娱乐app下载地址

               1 2 3 4 5 6 7 8 9
               ＄作曲家需要symfony/ux-c欧宝娱乐app下载地址ropperjs不要忘记安装JavaScript依赖项并进行编译＄NPM install——force＄NPM运行监视#或用纱线＄纱线安装力＄纱看
              

还要确保您拥有至少3.0的版本@欧宝娱乐app下载地址symfony / stimulus-bridge在你的package.json文件。

使用

要使用Symf欧宝娱乐app下载地址ony UX Cropper.js，需要注入CropperInterfaceservice，创建一个Crop对象，并在标准表单中使用该对象:

               12 34 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
               / /……使用欧宝娱乐app下载地址＼组件＼HttpFoundation＼请求；使用欧宝娱乐app下载地址＼用户体验＼Cropperjs＼形式＼CropperType；使用欧宝娱乐app下载地址＼用户体验＼Cropperjs＼工厂＼CropperInterface；类HomeController扩展AbstractController｛/** * #[路由('/'，名称:' app_首页')]*/公共函数指数(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可以是任何Cropper.js选项．

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

               1
               {{form(form)}}
              

扩展默认行为

欧宝娱乐app下载地址Symfony UX Cropper.js允许你使用一个自定义的刺激控制器来扩展它的默认行为:

                12 34 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);} disconnect() {//当控制器断开连接时，应该总是删除监听器以避免副作用这.element.removeEventListener (“cropperjs: pre-connect”，这._onConnect);这.element.removeEventListener (“cropperjs:连接”，这._onConnect);} _onPreConnect(事件){// cropper还没有被创建，可以修改选项控制台. log (event.detail.options);控制台. log (event.detail.img);} _onConnect(事件){// cropper刚刚被创建，你可以从事件中访问细节控制台. 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 ();
               