反动原生图像变换

概述

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

举例说,您可调整大小并裁剪,添加叠加图像,模糊或像素面孔,应用各种特效和滤镜并应用设置优化图像并按需交付图像

上头@cloudinary/url-gen包简化变换URL生成,并包括特殊组件和指令以方便嵌入资产

图像变换带回想原生

变换图像资产使用@cloudinary/url-gen包创建变换后传递变换图像对象sldImg属性输入高级图像组件加载图像例举 :

上例中前端_face图像裁剪成150x150像素缩图圆角

上头@cloudinary/url-gen包安装附加transformation-builder-sdk库依赖性处理URL转换生成部分

可使用变换构建器引用查找所有可用变换、语法和示例

语法概述

上头@cloudinary/url-gen包提供直觉编码经验转换资产

• SDK支持基于动作语法,设计使建楼交付URLs和变换逻辑和可发现性
• 允许从开发环境内发现可用选项,并确保只支持选项可并用

通用语法形式如下:

实例有:

动作组

• 资产曝光法调用行动小组高山市myImage.adjust()表示对云形指令 如何变换资产的具体方面
• ActionGroup接收动作对象参数定义要应用的具体动作
• 动作对象通过工厂方法创建Adjust.replaceColor())
• 某些动作需要限定参数光蓝)
• 可查找更多Active in@cloudinary/url-gen/actions
• 可导入所有动作导入{actions}从'@cludinary/url-gen'

定性值和定性值

• 行为曝光方法定义行为容( ))
• 我们称之为手法定性词
• 定性人通常接受定性值高山市17内容留性(17))
• 质量标值可以是原始值(数串)或预定义可导入SDK值
• 多质化values函数
• 查找更多量化标值@cloudinary/url-gen/qualifiers

ectionGroup输出完全变换组件URL内(分片裁剪)例例上语法示例生成 URL

树形摇动

上头@cloudinary/url-gen包允许只导入您需要的东西,以最小化捆绑大小

看变换构建器引用面向所有动作和限定词

举个例子,如果导入特效中输入所有效果动作,这可能超出你需要唯一原因你可能想这样做 使其他方法可发现不摇树动作需要资质Effect.outline())

• 无树摇动:

  您也可以使用 :

  本案概要()等值Effect.outline().

• 带树摇动:

相似地,限定值:

• 无树摇动:

• 带树摇动:

本指南显示的大多数例子使用树摇动

快捷方式别名

简化语法中某些语法可用字符串快捷键嵌套限定词比方说,比方说:

你可以说:

外加交付格式和质量别名,以进一步缩短语法举例说,以上可简化为:

质量代之以:

你可以说:

交付变换图像

上头@cloudinary/url-gen包很容易创建图像URL,包括任何变换参数

直接URL构建

可通过以下方式构建图像URL:

1. 配置云型实例
2. 证明云化图对象交付图像使用sld.image.
   
3. 调用toURL()方法云化图对象返回交付URL

产生URLmyURL表示 :

指定图像提供版本

可指定图像特定版本使用setVersion方法论版本添加到交付URL资产版本.

例举指定版本16106235样本图像从上例

所生成的 URL现为 :

指定交付类型

可修改交付类型默认上传向任何其他方交付类型中使用集DeliveyType方法论

举例定义取回URL:

产生URL为:

变换图像

图像转换方式是向图像交付URL添加串行转换指令举个例子,将图像缩放到400像素宽度时添加session, w_400.

https://res.www.aaaalireno.com/demo/image/upload/c_scale,w_400/bike.jpg

使用@cloudinary/url-gen包上执行一个或多个变换动作转换图像云化图对象(见语法概述)记住导入操作使用 :

链式变换

云形变换可连锁在一起(每一次变换应用前一次变换的结果)。下代码裁剪图像150x150圆角,应用sepia效果,将文本增到重裁图像顶端中心,然后全结果旋转20度并交付PNG

上方代码生成图像交付URL

应用常用图像变换

本节概述并举例说明如何使用图象变换常用特征@cloudinary/url-gen包化

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

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

裁剪裁剪

变大小和/或裁剪图像有多种方法,并控制在裁剪期间保存的图像区下例使用填充裁剪法生成并交付图像完全填充请求 250x250大小并保留原侧比使用面部检测重力确保图像中所有面部保留并居中

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

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

转换为另一种图像格式

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

• 指定图像公有标识并配有期望扩展
• 使用格式化动作类型交付动作
• 使用汽车格式指令云化以最优化格式为每个浏览器提供图像

例举 :

开工gif格式交付.jpg文件

• 或添加.gif即时扩展公共ID云化图:

  返回URL

• 或使用交付动作设置格式化至gif系统内注myImage.format('gif');算法化名FormyImage.delivery(format('gif'));:

  返回URL

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

返回URL

更多细节见:

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

应用图像特效和滤镜

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

下方代码应用卡通效果、圆角效果和背景色效果

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

添加文本图像叠加

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

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

图像优化

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

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

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