阵阵媒体变换

或您的用户上传媒体资产到云形后,您可以通过动态URL提供这些资产动态URL中包含指令,告诉云形使用组合变换动作变换资产云中自动实现所有变换,变换资产在快速CDN向终端用户传递最优用户经验前自动优化

举例说,您可调整大小并裁剪,添加叠装图像或联播视频,模糊或像素表情,应用各种特效和滤波器,并应用设置优化媒体并响应性交付媒体

云形SDK简化变换URL生成 方便嵌入资产可使用达特云化_url_gen包参考查找小蝶中所有可用变换,并附语法和示例

语法概述

Cloudinary飞速SDK提供简单增强开发者经验

• 编译归定交付URL时,每个动作表示不同变换组件.
• 允许从开发环境内发现可用选项,并确保只支持选项可并用

• 行动小组:a行动小组表示对云形指令如何变换资产的具体方面(例如调整,效果学或调整大小)
• 动作:动作定义特定动作应用adjust(Adjust.replaceColor()),effect(Effect.blur())或resize(Resize.crop()))
• 定性词:定性词进一步定义如何应用Action容留性条件化adjust(Adjust.replaceColor())带值动作容留性(17))某些动作还配有必修饰语,并随后作为动作方法的一部分提供(例如,adjust(Adjust.replaceColor(Color.gold()))指定颜色应用)

输出动作表示URL中完全变换组件例例上语法示例生成URL类似

支持行动小组

多数变换可传递为参数 跟随云性新动作语法使用增强代码自动化特征可发现所有支持参数输入行动小组即想使用并全部支持动作分组中并显示语法单选动作,它支持定性词将显示 。

下图动作组当前支持对象

• 调整集成动作细微修改并改进资产,例如亮度并不透明度.
• 边界:绘制资产边框
• 交付:允许设置质量、格式和DPR设置交付资产
• 效果学:允许您为图像添加特殊特效卡通化,模糊性并象素板和视频摇摇乐并循环式)
• addTransformation:使您直接传递变换字符串.
• 调整大小:提供多项选项重构和裁剪资产,包括铺设、缩放、安装、增加特定高度和宽度、具体说明重力等
• 旋转:提供旋转资产设置
• 圆形操作器圆角资产视您的规范而定,效果范围从微妙四舍五入到圆圆或oval形状

传递变换字符串

多数变换可用新动作语法参数传递部分变换只能像字符串传递

• 自完全特征查找支持哪些变换新基于动作语法
• 看变换URLAPI引用综合列表所有可用变换和语法传递字符串时使用
• 通过字符串转换addTransformation()行动小组.
  

下示例显示重裁图像覆盖应用转换成字符串

交付变换资产

提供并变换图像、视频和非媒体资产有不同方式:

• 可使用图像交付变换Cldimage部件封装小蝶认证图像显示部件化
• 使用 URL构建 URL 可插入图片、视频和非媒体资产cloudinary.image,cloudinary.video并云化.rawhelper方法后从ap调用URL

上头Cldimage部件

云式/浮点Cldimage部件提供云化图像

部件内可设置图像特征,包括版本化,容积,URL后缀,资产类型,交付类型可传递变换生成原创资产变换

例举指定版本化并URL后缀将使用样本jpg图像URL并调整图像宽度100px和高度150px

默认显示图片使用Cldimage部件缓存减少加载时间并改进用户经验

如果要关闭自动缓存,请关闭缓存标志,向参数添加以下导入语句和配置参数Cldimage部件:

云式本地视频播放器

FlutterSDK中还包含建在顶端的云式本地视频播放器ViewPlayer飞碟插件.方便使用各种云视频功能并使用设备本地播放器传送视频Android使用播放器ExoPlayer系统OS使用AVPlayer系统.

创建播放器使用CldVideoController新建控制器实例并提供视频公共标识或全云式URL

拥有播放器控制器实例后,可添加到视频Player从视频播放插件导入

完全工作实例简单视图使视频播放器和播放/暂停按钮

变换

包括视频变换CldVideoController实例生成原创资产变换初始化播放器时定义变换例举 :

直接URL构建

可使用直接URL构建指令交付媒体文件,然后添加到图像或视频视图中

构建图像、视频或非媒体文件 URL使用cloudinary.image,cloudinary.video或云化.raw帮助者方法

构建图像或视频URL时,可添加下文示例显示的变换

应用命名变换

可预定义数组变换并分配名称.之后,你就可以简单应用全套变换到 URL缩短复杂变换URL并方便复用多资产变换

您可以通过API创建和管理命名变换或使用UI控制台变换构建器.

假设你有一个命名变换调用趣味特效内含卡通化并轮廓效果并程序板大小变换带高度显示参数300px

建立 URL 时可自动应用这些变换

组合变换

云化支持强变换连多重变换并列单项变换请求,例如裁剪图像并添加边框在某些情况下,你可能想对上一个变换请求执行额外变换

支持变换URL中的多项变换时,可包含多项变换构件,每个变换构件除以 '/'每种变换组件应用前一组件的结果极速应用多项变换通过简单添加下一变换实现动作切换下示例优先裁剪原图像到一组自定义坐标并变换结果以填充130x100矩形

下例应用4链化变换:自定义裁剪300x200,填到130x100,旋转20度后缩放50%

应用常用图像变换

本节概述并举例说明下列常用图像变换特征,并链接到这些特征的更详细的文档

• 裁剪裁剪
• 转换为另一种图像格式
• 应用图像特效和滤镜
• 添加文本图像叠加
• 图像优化

记住本节仅意在向您介绍使用图像变换法与小蝶基础知识

综合解释如何实现各种变换见图像变换.完整列表支持图像变换及其用法见变换URLAPI引用.

裁剪裁剪

变大小和/或裁剪图像有多种方法,并控制在裁剪期间保存的图像区

也可以使用自动重力自动判定什么保留在裁剪中

细节重构和裁剪选项见大小裁剪图像.

转换为另一种图像格式

可基本以图像格式向云形传送图像三种主要方式转换并交付另一种格式:

• 指定图像公有标识并配有期望扩展
• 使用Delivery.format()动作
• 使用格式.aut质量教云以最优化格式为每个浏览器提供图像

例举 :

开工.pg文件提供.png格式

二叉letCloudinary为每个浏览器选择最优格式举个例子,在 Chrome中,此图像可交付.avi或.web格式(取决于产品环境搭建):

上方代码生成 URLf_aut参数 :

更多细节见:

• 以不同格式发送图像
• 自动格式选择
• 提示和考量使用f_aut

应用图像特效和滤镜

从大范围图像特效、增强和滤镜中选择应用到图像可用效果包括各种色平衡和级效果、色调、模糊性、像素化、锐化、自动改善效果、艺术滤波、变形效果、轮廓、背景、阴影等

下方代码应用卡通效果和轮廓效果,圆角并添加背景色(然后作物并插入图像高度300像素)。

关于可用图像特效和滤镜详解见可视图像特效和增强.

添加文本图像叠加

可添加图像和文本为主图像叠加覆盖图像上可应用与所有图像相同的变换类型,并使用重力设置或x和y坐标控制重叠位置也可以对文本应用各种变换,如颜色、字体、大小、旋转等

举例说 下方代码覆盖一对情侣照片迭代照片使用面部检测调整色饱和度并应用维格特效果裁剪词'爱'添加成粉红色花式字体并旋转适配设计并添加气球图形外加最后图像裁剪和角角四舍五入

更多细节见:

• 图像分层
• l层

图像优化

默认时云式自动执行所有变换图像的某些优化还有一些附加特性使您能够进一步优化应用中使用的图像其中包括优化图像质量、格式和大小等

举个例子,你可以使用汽车值对格式化并质量学属性自动交付格式和质量图像,在满足质量水平要求的同时最小化文件大小下方应用这两个参数,结果文件尺寸下降50%(1.4MB vs.784KB)无可见质量变化

深入审查多方法优化图像,见图像优化.

视频教程:优化小蝶图像

观看视频教程学习如何优化图像传送

教程内容

应用常用视频变换

本节概述并举例说明下列常用视频变换特征,并链接这些特征的详细文档

• 调整大小裁剪视频
• 寄存视频
• trimming视频
• 添加视频叠加
• 添加视频特效

记住本节仅意在向您介绍使用视频变换法基础

完整列表支持视频变换及其用法见变换URLAPI引用.

综合解释如何实现各种变换见视频转换.

调整大小裁剪视频

并控制片段保留区实例如下:

• 裁剪视频高度800px和宽度750px
• 将视频重排高度320px和宽度480px,同时用原始资产模糊打入后台以维护原侧比

视频所有可裁剪方式见参数C(crop)段变换URL引用标记为支持视频

细节重构和裁剪选项见调整大小裁剪视频.

寄存视频

可分解视频各种选项,包括只分片视频、开端或端分录视频、自定义分解视频互换并分解视频

下例显示两段视频缩短为5秒du_5.0主视频首补一秒s_1双视频统一调整大小c_fill,h_300,w_450并分解pl_splice:

详细描述如何联播视频见复数参数解析flag段变换URL引用.

细节所有方式 组合视频,见嵌入式介质.

trimming视频

裁剪视频时,可判定何时开始裁剪、何时停止和/或剪裁视频持续时间

下示例显示从3.5秒开始对段裁剪视频s_3.5持续5秒du_5:

视频剪切方式见等(启动顶替),du(期限),eo(端对接)参数解析变换URL引用标记为支持视频

更多细节裁剪视频见trimming视频.

添加视频叠加

可添加视频、文本或图像叠加到视频上

下示例显示一视频缩放C_标度w_80并置东北角g_nort以叠加方式l_video:exercise2开始三秒后主视频开始播放3:

以各种方式添加视频叠加,见参数l层段变换URL引用标记为支持视频

更多视频叠加细节见视频布局层.

添加视频特效

从各种视频特效、增强和滤波中选择应用视频可用效果包括速度、方向和循环控制,加进度指示叠加,不同的透明度设置,AI生成预览,各种色平衡和级效果,模糊化、淡化和自动改进效果

下示例显示视频反射Effect.fadeIn(2000),Effect.fadeOut(4000)循环两次效果.loop(2)中并应用Vignette滤波Effect.vignette().strength(50):

所有视频特效见参数e(效果)段变换URL引用标记为支持视频

深入审查所有可用视频特效见视频特效.