一般来说，无论是移动应用还是桌面应用，用户界面都包含大量的视觉媒体（图像和视频），这就要求设计师和前端开发人员之间进行密切合作。构建ui的过程需要一个设计人员与开发人员之间的交接，在此过程中，设计者将使用Photoshop、InVision和Sketch等工具生成的蓝图传递给开发人员。然后开发人员使用层叠样式表（CSS）实现蓝图，旋转图像背景是一项常见的任务。克雷格·巴克勒（Craig Buckler）在2018年7月撰写了一篇优秀的教程，介绍了如何使用CSS实现这一点。使用Cloudinary，您可以通过多种方式转换图像，而无需使用CSS或涉及设计器。例如：删除图像背景。旋转图像。把一个图像放在另一个图像上。使图像背景透明，以便与背景色混合。本文将指导您完成这些过程。总体而言，Cloudinary作为一个端到端的可视媒体解决方案而大放异彩：它有效地处理上传和动态操作，自动化优化，并在所有设备上响应地提供图像和视频。网络研讨会通过编程方式旋转图像非常显著，您只需向图片的url添加参数，就可以在Cloudinary上操作和转换图像。要旋转图像，例如这个-：-将其上载到Coudinary，然后在其URL中添加角度参数以及顺时针旋转图像的度数。例如_60，其中60表示60度旋转。然后，URL显示-URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/a_60/180_yacaar.pngRuby：复制到剪贴板cl_image_标记（"180_亚卡亚尔.png"，：角度=>60）PHP:复制到剪贴板cl_image_标记（"180_亚卡亚尔.png，数组（"角度"=>60）Python:复制到剪贴板云图像（"180_亚卡亚尔.png"）。图像（角度=60）节点.js：复制到剪贴板cloudinary.image（"180_亚卡亚尔.png"，{角度：60}）Java:复制到剪贴板cloudinary.url（）.transformation（新转换（）.angle（60））.imageTag（"180_亚卡亚尔.png");JS:复制到剪贴板cloudinary.imageTag（'180）_亚卡亚尔.png'，{angle:60}）.toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"180_亚卡亚尔.png"，{角度：60}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板cl >.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Angle（60））.BuildImageTag（"180_亚卡亚尔.png")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（new transformation（）.angle（60））.generate（"180_亚卡亚尔.png");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setAngle（60））.generate（"180_亚卡亚尔.png")!，cloudinary:云数据库）通过编程，云服务器服务，你可以用Ruby，PHP，Python中的一个代码行来旋转图像，节点.js、Java、JavaScript、JQuery、React、Angular、.Net、Android和iOs.注释角度参数的正值将顺时针旋转图像；负值将逆时针旋转图像。增强旋转图像程序为图像提供了几十种变换效果。例如，对于前面旋转图像的阴影效果，在URL中的角度参数（a_60）之前添加一个阴影变换参数（e_shadow），如这是：urlrubyhppythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/e峎shadow：40/a_60/180型_亚卡尔·普格鲁比：复制到剪贴板cl_image_标记（"180_亚卡亚尔.png"，：转换=>[{：效果=>"阴影：40"},{：角度=>60}])PHP:复制到剪贴板cl_image_标记（"180_亚卡亚尔.png，数组（"transformation"=>数组(数组（"效果"=>"阴影：40"),阵列（"角度"=>60）)))Python:复制到剪贴板云图像（"180_亚卡亚尔.png"）。图像（转换=[{'效果'："阴影：40"},{"角度"：60}])节点.js：复制到剪贴板cloudinary.image（"180_亚卡亚尔.png"，{转换：[{效果："阴影：40"},{角度：60}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.效果（"阴影：40"）.chain（）.angle（60））.imageTag（"180_亚卡亚尔.png");JS:复制到剪贴板cloudinary.imageTag（'180）_亚卡亚尔.png'，{转换：[{效果："阴影：40"},{角度：60}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"180_亚卡亚尔.png"，{转换：[{效果："阴影：40"},{角度：60}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.效果（"阴影：40"）.Chain（）.Angle（60））.BuildImageTag（"180_亚卡亚尔.png")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.效果（"阴影：40"）.chain（）.角度（60））。生成（"180_亚卡亚尔.png");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setEffect（"阴影：40"）.chain（）.setAngle（60））。生成（"180_亚卡亚尔.png")!，cloudinary:云数据库）此外，还可以通过在参数中指定所需的值来自定义x和y阴影偏移并更改阴影的颜色（co）示例：URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/e峎shadow：40，15，15，钴黄/蓝60/180_亚卡尔·普格鲁比：复制到剪贴板cl_image_标记（"180_亚卡亚尔.png"，：转换=>[{：效果=>"阴影：40"，：x=>15，：y=>15，：color=>"黄色"}，{：角度=>60}])PHP:复制到剪贴板cl_image_标记（"180_亚卡亚尔.png，数组（"transformation"=>数组(数组（"效果"=>"阴影：40"，"x"=>15，"y"=>15，"颜色"=>"黄色"），阵列（"角度"=>60）)))Python:复制到剪贴板云图像（"180_亚卡亚尔.png"）。图像（转换=[{'效果'："阴影：40"，'x'：15，'y'：15，'颜色'："黄色"}，{"角度"：60}])节点.js：复制到剪贴板cloudinary.image（"180_亚卡亚尔.png"，{转换：[{效果："阴影：40，x:15，y:15，颜色："黄色"}，{角度：60}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.效果（"阴影：40"）.x（15）.y（15）.color（"黄色"）.chain（）.angle（60））.imageTag（"180_亚卡亚尔.png");JS:复制到剪贴板cloudinary.imageTag（'180）_亚卡亚尔.png'，{转换：[{效果："阴影：40，x:15，y:15，颜色："黄色"}，{角度：60}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image（"180_亚卡亚尔.png"，个人云服务器，{转换：[{效果："阴影：40，x:15，y:15，颜色："黄色"}，{角度：60}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.效果（"阴影：40"）.X（15）.Y（15）.Color（"黄色"）.Chain（）.Angle（60））.BuildImageTag（"180_亚卡亚尔.png")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.效果（"阴影：40"）.x（15）.y（15）.color（"黄色"）.chain（）.角度（60））。生成（"180_亚卡亚尔.png");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setEffect（"阴影：40"）.setX（15）.setY（15）.setColor（"黄色"）.chain（）.setAngle（60））。生成（"180_亚卡亚尔.png")!，cloudinary:云数据库）将一个图像放置在另一个图像上要获得置换效果，请将一个图像放置在另一个图像上，方法是将e_displace参数添加到URL中，如下所示示例：URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到剪辑board\u示例，w_182，h_198/c_垫，h_2.0，w_1.0/l_径向_ipdlli，e_位移，y_8/e_trim/fl_层应用，x_26，y_28/玻璃.jpgRuby：复制到剪贴板cl\U图像标记（"玻璃.jpg"，：转换=>[{:overlay=>"sample"，：width=>182，：height=>198}，{:height=>2.0，：width=>1.0，：crop=>"pad"}，{:overlay=>"radial-ipdlli"，：effect=>"displace"，：y=>-8}，{:effect=>"修剪"}，{:flags=>"层应用"，：x=>-26，：y=>28}])PHP:复制到剪贴板cl\U图像标记（"玻璃.jpg，数组（"transformation"=>数组(数组（"overlay"=>"sample"，"width"=>182，"height"=>198），数组（"height"=>2.0，"width"=>1.0，"crop"=>"pad"），数组（"overlay"=>"radial_ipdlli"，"effect"=>"displace"，"y"=>-8），淘客网，数组（"effect"=>"trim"），数组（"标志"=>"层应用"，"x"=>-26，"y"=>28）)))Python:复制到剪贴板云图像（"玻璃.jpg"）。图像（转换=[{'overlay'："sample"，'width'：182，'height'：198}，{'height'：2.0，'width'：1.0，'crop'："pad"}，{'overlay'："radial-ipdlli"，"effect"："displace"，"y"：-8}，{'effect'："修剪"}，{'flags'："图层应用"，'x'：-26，'y'：28}])节点.js：复制到剪贴板cloudinary.image("玻璃.jpg"，{转换：[{覆盖："示例"，宽度：182，高度：198}，{"0.0"宽度："1.0"，宽度，大数据技术及数据分析培训，{覆盖："radial_ipdlli"，效果："置换"，y:-8}，云服务器推荐，{效果："修剪"}，{标志："层应用"，x:-26，y:28}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.爱