图像变换

网络或移动应用提供自己精心选择的图像、终端用户上传图像或两者并发,你可能需要调整原创以适应网站或移动应用的图形设计

云性动态URL变换帮助你编程和飞跃实现那些目标,而不需要图形设计师和花哨编辑工具

可手动编译代码中的这些URL或利用云型SDKs使您能够用直觉语法写变换代码,为首选编程语言或框架设计语法,并让SDK自动为您构建这些URL

仅举几个例子说明一些常用案例,通过合并云化变换,你可以在飞翔上实现这些案例点击每一图像查看每个案例应用的 URL参数

概述

云形可方便地将飞图像转换为任何所需格式、样式和维度并应用特效和其他视觉增强也可以优化图像,以最小文件尺寸同时提供高视觉质量提高用户体验和最小带宽通过执行动态图像变换和交付URL可以实现所有这一切图像变换后通过快速CDN传送给用户并优化缓存

图像变换可:

• 使用图像传递图像格式适合你需求
• 变大小裁剪图像到需要维度使用 不同缩放和裁剪技术或使用智能裁剪技术面部检测或自重力裁剪聚焦相片最相关部分
• 生成新图像层积基础图像上的其他图片或文本
• 应用各种效果过滤器和其他视觉增强帮助图像实现期望效果

快速示例

下方可见变换URL和对应SDK代码生成图像并应用数大变换参数

• 缩放并紧紧裁剪图像适配二百分之二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二/c_thumb,g_face,h_200,w_200/
• 圆角圆角/r_max/
• 转换并交付图像最佳透明格式供请求浏览器使用例举 webp或aviff_auto/

变换URL语法

云媒体资产使用简单传输HTTP或HTTPSURLs访问,然后通过世界快速CDN传送用户URL包含公共身份证+任选变换参数公共标识符是资产独有标识符,或上传资产云化时定义,或由云化自动分配(见Cloudinary上传资产更多细节说明公共ID的各种选项

生成云型SDKs变换URL

云化SDKs自动构建变换URL允许您继续开发首选框架并提供辅助方法简化图像标签和图像变换URL

变换URL结构

默认云式资产交付URL结构如下:

元素化	描述性
云名	产品环境专用公共标识符,用于URL构建和API访问 注解支付客户高级计划或更高可请求使用私有CDN或CNAME自定义域名用于交付URL
资产类型	类型资产交付有效值 :图像显示,视频播放或原生. 上头图像显示类型包括静止图像和图片格式、动画图像、PDFs、分层文件,如TIFFSPS 上头视频播放类型包括视频和音频文件 上头原生类型中包括上传到云形文件并不符合上述类别之一一般来说,变换无法在原生资产可按原样下载或在某些情况下可与图像或视频变换并用
交付类型	存储或发送类型细节所有可能类型见送货类型.
变换	可选性一个或多个逗号分离变换参数单URL组件或集链式变换URL多构件中变换 URL首次存取时,衍生媒体文件由飞转创建并交付用户衍生文件还缓存CDN并立即向请求相同资产的所有后续用户提供
版本化	可选性可把版本输入交付URL中,绕过CDN缓存版本并强制交付最新资产(如果资产用新文件反写)。简洁化版组件通常不包含在本页示例URL细节见资产版本.
公共标识	唯一标识资产,包括文件夹结构相关时
扩展	可选性文件扩展请求交付格式资产默认值:原上传格式或由确定格式f_aut时使用

最泛泛地发送上传到云产品环境而不作任何变换的图像时,交付URL将格式化:

https://res.www.agrosoland.com/ 图像/加载/ .

举例说,用公共标识显示图像leather_bag_gray中输入演示文集产品环境jpg格式化

下图示例提供同一张图像,此时应用变换参数,使图像缩放并裁剪填充250px平方形(比例为1:1=1.0)并应用浅蓝边框

变换URL技巧

• 面向客户自定义域名面向云化高级计划及以上-基本图像传送URL变换https:// /image/upload....
• 可简单修改图像格式扩展文件,以其他支持图像格式转换并交付图像细节见以不同格式交付.

• sEO友好后缀替换图像/加载元素URL带图片制作并附加期望后缀除法例举,如果你有烹调图像 随机公共标识像abc1def2上传图像

  https://res.www.agrosoland.com/ /images/upload/a12345/cooking.jpg

  更多细节见动态SEO后缀.

• 快捷URL使用默认交付图像文件时也可以使用上传类型.带云化根路径URL特征化 并 元素可以从 URL 省略(这些元素自动默认值图像显示并上传)root路径快捷交付URL

  https://res.www.agrosoland.com/demo/c_crop,h_200,w_300/sample.jpg

变换 URL视频教程

下段视频快速展示动态变换URL与图像和视频并发

教程内容

送货类型

上头交付类型URL元素表示资产交付方式,尽管在大多数情况下交付类型值是在资产存储云中时判定的。

支持交付类型值如下:

交付类型	描述性	学习更多
上传	默认交付类型上传资产在大多数情况下,这种交付类型表示资产公开提供可选择限制存取带a资产上传交付类型内含严格变换并访问模式设置)	上传a
私有	URL原创资产只能用签名URL访问变换版资产公开提供严格变换并定义)	上传私有资产
验证	初始版和变换版资产都只能使用签名URL或认证令牌访问	上传认证资产 交付验证资产
链表	生成有指定标签的资产列表 注解:这不是经典意义上的送货类型,因为它与个体资产无关但要使用此特征,请具体说明链表中交付类型元素URL	客户端资产列表
取回	开机变换远程资产	取远程媒体文件
脸书 微博 微博名 长渡	从脸书、Twitter或基于指定ID或名的其他指定的社会交付类型获取剖面图片	社交媒体简介图片
ytube系统 hulu市 维米欧 Animoto系统 世界史塔普 每日运动	提供从公共视频网站特定视频生成的缩略图	取公共视频缩略图
多维	允许从所有已分配到指定标签的图像资产中提供单动画图像(GIF、PNG或WebP)。	多方法 创建动画图像 创建PDF文件
文本翻译	允许您从指定的文本字符串和样式参数生成产品环境图像,并用作图像叠加	文本法
url2png	URL2PNG网站截图附加.帮助生成网站截图	URL2PNG网站截图附加
资产类	仅与Ruby铁路SDK相关.交付文件使用同步静态命令	静态文件

参数类型

有两种变换参数:

• 动作参数参数对资产执行特定变换
• 定性参数参数不单执行动作,而是改变默认行为或调整相应动作参数结果

最佳实践是每个 URL 构件只包含一个动作参数

if you want应用多项动作单变URL中单独应用链式组件中,每个动作按前一动作的结果执行

对比中修饰语参数类必须包含运维参数

• 多数修饰词是可选的,意指相关动作参数可独立使用,但您可添加可选修饰词修改默认行为
• 在某些情况下,动作参数需求一个或多个限定词完全定义变换行为
• 有几个参数可独立使用为动作参数,但也可以在其他假设中使用为附加条件

例例下变换包括多重变换动作修饰变换加特殊动作定义 变换动作行为额外调整

变换方式中 :

• 上头宽比,重力并宽度修饰符控制方式缩略图裁剪动作执行
• 上头圆圈动作没有限定词
• 上头颜色显示修饰符置默认色轮廓效果动作
• 上头颜色显示修饰符重置默认影效果颜色化而xy修饰符调整位置

变换标志

变换标志改变默认变换行为在某些情况下,它们改变变换URL整体默认行为在其他例子中,则改变一个或多个特定变换参数行为,这些参数必须并用在同一URL组件中

泛泛地说,有数十个标志可以改变交付和格式、裁剪和定位、叠加值、元数据与颜色剖面图以及PDF和文本行为,仅举几个例子

例举 :

• pl_attachment改变整体变换的正常行为与其在网页上提供资产,不如将变换媒体文件下载为附加文件可独立使用此标志

• fl_resti修改迭代重裁参数评价方式只能与叠加使用L_)参数

• fl_laya应用告诉云形应用所有链式变换,直到包括此标志的变换成份上最后加叠或下铺资产上,而不是基值资产上应用这些变换成份上标记作用为关闭图层变换段,类似于闭合括号定位定义应如何应用层,例如重力和偏移用用此标志在组件中定义

细节所有可用变换标志见国旗切换引用段

HTTPS使用SDKs生成安全URL

基于后向兼容性原因,多云化先前SDK主版生成网站URL默认值使用SDK时,通常想指令SDK生成网站sURL设置安全性参数切换真实性全局化SDK配置.可同时传递安全性本地选项在每次变换操作中

下示例仅显示SDKs和库版本需要传递安全性=真实性生成 HTTPS

Verbose非Verbose语法

带多选项的某些变换参数提供两种替代语法定义选项值:

• 无序动画:每种变换选择(无论需要或可选)都用动词格式说明名值并选用结号隔开:或分号;取决于变换

  选项可按任意顺序指定,而你只需包括那些需要定义的选项(或需要定义的选项)。

  使用此语法时,您还可以选择只指定选择中您不想要使用默认值而默认值将应用到其他人的选项。

• 非动词排序:变换选项仅用值定义,并必须输入预定义选项顺序从语法到左方所有值均必须输入

支持动词或非动词URL语法的变换变换引用.都支持时SDKs总输出动词语法

Verbose非verbose实例

上头主题化效果支持颜色显示并photosensitivity选项,但用动词语法可按不同顺序指定例举 :

e_theme:photosensitivity_110:color_black

使用非动词语法时,必须按序指定参数因此,即使你只想改变默认行为photosensitivityLast选项,你必须仍然指定值使用颜色显示(优先)选项

e_theme:black:110

资产版本

上头版本化构件为云式交付URL选取部分,可添加到绕过CDN缓存版并强制交付最新资产云信返回值版本化参数相容上传响应中返回URL并safe_url参数中也包括版本化组件表示上传时间戳

• 无版本值交付URL会交付CDN缓存版本,如果可用或请求云端最新版本不缓存(或缓存版本过期时)
• 提供带版本的URL将交付缓存CDN版本否则,它会绕过缓存CDN版本并立即请求并交付云端最新版本

示例图像交付无版本URL

示例图像交付URL版本

链式变换

云化支持使用动态URL应用到苍蝇上的强变换组合多项变换动作作为单交付请求的一部分,例如裁剪图像并添加边框

泛泛地讲,这是最佳实践链式每一次变换动作化URL中分块链

支持链式变换时,云化变换URL允许你包含多变换组件,/中,每个变换组件执行前一组件的结果云化SDKs可应用多变构件变换参数并设置成数组变换地图

上传JPEG图像实例命名雨伞:

1. 三大链式变换:填充150px广场,转圈并交付最优透明格式

   

2. 5链式变换:填充250*400px画像,然后旋转结果20度,然后向旋转图像添加棕色轮廓,并优化生成图像以最优压缩提供优视觉质量和最优透明格式交付:

   

命名变换

A级命名变换预定义的变换参数集,即自定义名称易参考单名变换可应用所有定义变换这使它容易:

• 复用多资产变换
• 短复杂变换URL
• 隐藏交付URL变换细节
• 简化变换功能/失效严格变换模式化

命名变换可包括名化变换,使你定义变换链更容易多资产运行

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

命名变换定义后,您可用变换资产变换参数(t级并命名变换名比方说t_instagram-auto-crop.

可包含用户定义变量中命名变换后传自定义变量值从外部源转入变换允许创建名称变换表并灵活化

举例说,您可以定义复杂命名变换,包括文本叠加命名变换,使用用户定义变量表示文本字符串值

也可以将命名变换设置为变换模板中,您可以在媒体库中应用模板,以便预览资产使用不同名称变换的方式查找

更多细节见用户定义变量.用例用用户定义变量显示命名变换见命名变换自定义变量.

创建命名变换

可编程创建名变换或用云控制台变换UI

程序化创建命名变换使用变换管理API方法下示例定义命名变换small_profile_thumbnail使用自动裁剪将资产缩放到特定程序缩略图显示所需的大小

更多细节和实例见创建变换方法中管理员API引用.

程序化创建命名变换:打开变换页面控制台无障碍产品导航菜单中

从此有几种方法创建命名变换

1. 启动转换自变换图片库编模并精细满足需求后再用所选名称保存
   
2. 视图所有动态变换(那些你生成并飞送的变换)变换日志从这里您可以复制变换字符串并使用快速编辑选项变换构建器.
3. 使用从零开始创建新变换变换构建器并保存你选择名

保存命名变换后,你可以查看列表命名变换控制台页面从这里可编辑、拷贝或启动/禁用严格变换.

也可以选择包含变换为预置以便应用到资产下载选项标签资产管理下调页

变换构建器

云形变换构建器用简单易用方式创建并保存您的变换变换构建程序有两种操作模式:

• 构造性:通过选择和配置变换动作人工构建变换
• 逆向:用AI聊天构建变换用自然语言描述

变换构建视频教程

观看视频快速介绍变换构建程序

教程内容

使用Builder创建变换

创建新变换打开Builder或头转向命名变换页面并点击新建.将带入变换构建器UI选择模式使用

构造模式

变换构建器构造性模式提供 :

• 简单直觉UI选择和配置变换动作-易发现动作和参数
• 变换编成数列自足动作,这样你应用时可以看到每个变换结果
• URL和SDK代码准备直接复制并粘贴到您的代码中
• 能力从自己的产品环境向某物更新默认预览图像
• 快速编辑功能,方便添加变换使用URL语法.

构建者支持最常用变换动作变换动作未列时,可添加附加变换动作使用变换URL语法指定变换方式或可切换遗留编辑器创建变换

逆向模式

变换构建器逆向模式提供 :

• AI驱动对讲界面描述您想用自然语言创建的变换
• 迭代提示继续对话并完善变换
• URL和SDK代码准备直接复制并粘贴到您的代码中
• 能力从自己的产品环境向某物更新默认预览图像

命名变换示例

下方有两组大相径庭的变换lighthouse_reflection图像 :

• 填度400定义为ar_1:1,c_fill,g_auto,w_400将图像填充为400*400平方块,自动聚焦于图像中最有趣的区域:
  

• rounded_cartoonified_frame定义为e_cartoonify/r_max/co_rgb:add8e6,e_outline:30/b_rgb:add8e6应用卡通效果,转圈或oval形状,在Oval周围添加光蓝轮廓图,使图像不触动框架边缘,并用与轮廓相同的颜色填充透明背景
  

链名变换

链名变换前后举个例子,这里oval_cartoonified_frame命名变换后应用灰度效果

可连锁多名变换例例上段定义命名变换链

链式变换可创建长URL, 代之以定义命名变换, 包括链式变换, 包括名式变换举个例子,我们可以创建命名变换综合自上段命名变换

简单指定单名变换并应用到任何资产

去哪儿fill_circle_cartoon命名变换定义如下:t_fill_square_400/t_rounded_cartoonified_frame.

命名变换受限

自动格式

上头自动格式变换参数f_aut)如果用于命名变换无效

何时f_aut交付URL使用,CDN层决定最佳交付格式如果参数隐藏在命名变换中,则无法为CDN可见

可使用f_aut并加命名转换方式链化组件t_que/f_auto.

自动质量

上头自动质量变换参数q_aut有效命名变换,除一种情况外

何时q_aut交付URL使用浏览器设置保存数据HTTP头到上请求中q_aut翻译q_ato:ecoCDN级如果参数隐藏在命名变换中,则无法为CDN可见,故应用默认级别q_auto:g.

为了适应这种情况,你可能宁可使用q_aut并加命名转换方式链化组件t_square/qaut.

学习更多:保存数据支持

命名变换视频教程

观看视频教程学习如何创建重用名变换云化变换构建器UI.

教程内容

嵌入图片网页使用SDKs

访问上传图片或带URL的衍生变换URLs可使用 排成一行hTML代码或其他前端函数中的标签提供媒体资产

最便捷的交付方式是使用云式框架SDKs自动生成变换URL并使用HTML图像标签嵌入SDKs提供两个主要助手方法URL助手并图像标签助手.

云式URL助手法

上头云式URL助手法e.等云化_urlRuby/RailsSDK自动生成图像源URL举个例子,使用 URL助手法返回 URLleather_bag_gray图像宽度高度为300像素加蓝背景贴板

SDK代码输出URL

云性图像标签助手法

默认值云性图像标签助手法e.等Cl_image_tagRuby on Rails自动生成HTML图像标签,包括图像源URL

下图显示与上图相同的变换,但这次使用图像标签生成完全HTML图像标签

SDK代码输出以下HTML代码

云形图像标签帮助器方法允许你不仅指定云形变换参数,还指定普通HTML图像标签属性(例如alt、标题、宽度、高度)。举个例子,使用图像标签助手法创建HTML图像标签采样图像自定义属性设置为“a样本图片”,自定义属性设置为“samples

关于SDK助手方法的更多信息见相关文档转换SDK指南.

图片格式支持

图像可以各种格式上传至云形系统(输入格式),并很容易将这些图像转换为其他格式供网站或应用中显示(输出格式)。实例说明您可能想修改交付图像格式

• JPEG图片快速加载
• PNG高品质插图透明化
• 发送图像时浏览器不支持原创格式交付举例说,你可提供Photoshop图像JPEG

以不同格式交付

可转换并交付图片支持图像格式指定所需格式为交付URL文件扩展sdk构建 URL时,您可以将新格式扩展附加到资产公有ID或使用格式化参数化

示例显示上传woman-business-suitJPEG像PNG图像

组合图像转换格式提供与PNG相同的图像,但这次删除后台并转换成灰度

修改格式的另一个选项是明文调用fack_format变换参数f级内URLs)它可以帮助您改变文件扩展名时使用,例如当文件扩展名时取远程资产已经拥有不同文件扩展号(格式化)作为其 URL的一部分

以PNG格式从wikimedia获取远程图像并用JPEG格式提供图像(还缩到400像素宽度):

f_aut

可使用云式自动格式选择f_aut转换为自动交付最优化格式图像

举个例子,如果你带JPEG图像f_aut云形文件可生成并交付WebP、AVIF、JPEG XL或JPEG2000文件,视请求浏览器和账号设置而定上头f_aut算法同样提供最佳格式时原资产为PNG(有透明或无透明)、动画GIF等

细节见自动格式选择并提示和考量使用f_aut.

支持图像格式

下表汇总支持图像格式

格式化	扩展	支持上传一号	支持变换2
AI系统adobeIllstra	.a	对	对
动画AVIF	.avi	号	对九九
动画GIF	.gif	对	对
动画式PNG	.png	对	对
动画WEP	.web	对	对
AVIF	.avi	对	对九九
BMP	.bm	对	对
BW浏览器文件	.bw	对	对6
DjVu	.djvu	对	号
DNG系统(数字负值)	.dng	对	号
EPS系统封装邮箱	.ps.ept.eps3	对	对
FBX(Firmbox)	.fbx10	对	对6
FLIF系统免损图像格式	.flif	对	对
GIF系统	.gif	对	对
GLB二进制glt	.glb	对	对
gltGL传输格式	.gltf	对	对6
海夫	.heif,.heic	对	对
ICO系统	.i	对	对
设计化	.ndd	对	对3
JPEG	.jpg,.jpe	对	对
JPEG2000	.jp24	对	对
JPEGXRJPEG递增范围	.wdp.jxr.hd	对	对
JXLJPEGXL	.jxl	对	对
OBJ	.obj10	对	对6
PDF系统	.pdf	对	对
浦里市	.ply	对	对
巴布亚新几内亚	.png	对	对
私营司PhotoShop文档	.psd	对	对5
原始图像文件	.arw,.cr2	对	号
SVG	.svg	对	对
塔嘉讲义TGA	.tga	对	对
TIFF	.tif和.tiff	对	对
U3MA建材文件	.u3ma	对	对6
USDZ	.usdz	对7	号8
WebP	.web	对	对

图像变换类型

页面浏览图像转换基本原理其余页面本指南提供细节、使用案例和实例 多种类型变换

变换类型	描述性
裁剪裁剪	变大小图像服务器端
图像分层	将图像、文本或其他层嵌入(或嵌入)现有资产中生成自定义新创物
效果增强	应用各种特效、滤波器和其他艺术增强
面向检测变换	变换基于检测面部图像
动画图像变换	从产品环境多图像创建动画图像,转换成视频,在动画格式间转换并应用动画特效转换
三维模型	学习三维模型变换
条件变换	仅在满足特定条件时应用变换
用户定义变量和算术转换	使用算术表达式和变量为变换增加精度和弹性
自定义函数	输入远程函数或WebAssembly函数并应用结果转换

优化响应媒体

除通过转换媒体资产改变外观外,你还可以使用云式URL和各种参数控制交付方式

题目性	描述性
优化	提供最小文件大小媒体资产同时维护视觉质量、保存带宽并改进网站性能包括自动质量和格式选择优化q_aut并f_aut)
响应图像	交付图像完全匹配设备、视图大小、方向或分辨率等像素密度上传单高分辨率图像并允许云形自动变换
提供远程媒体文件 并 社交媒体简介图片	从网络上任何地方抓取媒体资产或从各种广受欢迎的社交媒体网络拉出社交媒体简介图片,包括支持即时变换和通过CDN优化传送
分层打印媒体	提供内容资产多页或多层,如PDFs或Photoshop文件,包括仅提供或转换选定页或多层选项
存取控制	控制者可访问媒体原创资产和变换资产,包括赋能严格变换,使用签名交付URL访问控制或访问模式控制谁访问资产而不调整 URL
高级URL交付选项	利用高级选项使URL对SEO更友好化,使用私有CDN或多CDN解决方案交付资产,为URL使用自定义域名(CNames),定义自定义favicons,处理资产版本等

创建新图像

云形提供各种方法 创建新资产

题目性	描述性
动画图像	从多图像资产创建单动画图像,将每个资产作为生成动画图像单框使用
PDF图片文件	从多图像资产创建PDF
斯普里特斯	创建并交付图案图片并配有相应的CSS
图像拼贴	从多图像资产创建图像拼图,并用特定的布局并用模版定义间距和颜色
图片文本	创建文本字符串图像并自定义生成图像的外观和感知并使用各种字体、颜色和样式参数