Azure CDN 图片处理
简介
Azure CDN图片处理是由Azure CDN服务提供的一个可靠、安全且经济的图片处理服务。可以实现缩放、裁剪、旋转、锐化、模糊、管道、水印亮度对比、图片格式转换、获取图片信息等功能，灵活适配各种终端大小、不同页面的图片展示样式和水印防盗等需求。
通过 Azure CDN 图片处理，用户可以利用 Azure CDN 服务，在任何时间、从任何位置和设备获取处理过的图片版本。
服务说明
Azure CDN 图片处理是作为 Azure CDN 服务的一个增值功能引入的，所以使用 Azure CDN 图片服务的前提是首先创建一个名为“图片处理”加速类型的 CDN 加速节点。图片服务本身无法作为一个单独 Azure 服务来使用。
目前Azure CDN图片服务没有提供相应的图形化管理界面，相应的CDN加速节点创建好之后，直接引用CDN加速域名加上控制图片尺寸、裁剪模式以及质量等图片处理参数，即可访问经过处理的图片版本。
限制
- 支持格式转换的文件格式包括 jpg, png, bmp, webp, gif，tif
- 图片源文件的大小不可大于 20MB
- 处理前后的图片尺寸不得大于 4096 * 4096 像素, 且任意边边长不得大于 4096*4 像素
- 目前图片处理服务支持https加速，但仅支持http回源
服务创建流程
“图片处理”加速类型的 CDN 节点仅限于在 Azure 门户中创建
1. 创建 CDN Profile
在"CDN profiles"上，单击“添加”。
输入"Name"、"订阅"、“资源组”、"Resources group location"、"Pricing Tier"默认请选择“S1 Standard”。
- "S1 Standard"即标准版CDN，支持静态内容加速，包括网页加速，下载加速，点播加速。
- "P1 Standard Plus"是标准版Plus，指直播加速。
- "P1 Premium"是高级版CDN，指之前已经申请过 Azure CDN 代为申请证书、并且仍然在使用该证书服务的用户，依旧按照高级版付费。将于 2019 年 7 月 1 日起不支持 Azure 代为申请证书的 HTTPS 功能。详情可参考：价格详情
点击 "创建"按钮
注意 这一步的 Azure 订阅选择注意要和第一步创建 Azure Storage 账户所使用的订阅保持一致，如果图片是存储在 Azure Storage 中。 “Price Tier” 选择上图所示的 S1 Standard，S1 Standard包含新增加的 “image processing” 加速类型。
2. 创建图片处理类型的 CDN 加速节点
如上图所示，这一步中的加速类型选择 “image processing acceleration”。选完加速类型后，再根据源站的情况，选择对应的源站类型。
等这个 CDN 加速节点配置完成后，用户可以将自定义域名 CNAME 到 Azure CDN 平台。CNAME 生效之后，就可以进行图片处理操作了。 后续的所有原始图片以及经过处理后的图片都是经过 CDN 加速的。
3. 验证图片可以访问
在进行接下来的具体图片处理之前，我们先来验证一下到目前为止的所有配置是否生效（如果原始图片存储在非 Azure Storage 存储账号下的用户，请直接查看 3.3；如果原始图片存储在 Azure Storage 里面，请参考3.1,3.2,3.3）：
3.1 创建 Azure Storage 账户并选择 Azure Storage 账户作为源站
创建 Azure Storage 账户请参见 创建存储账户
也可以不创建新的 Azure Storage 账户，使用一个现有的。
3.2 上传原始图片
创建好 Azure Storage 账户之后，用户就可以将原始图片上传到 Blob 当中。
这里提供两种上传方式：
3.3 访问验证
假设用户的原始图片访问链接为：
http://yourstorageaccount.blob.core.chinacloudapi.cn/container_name/img_name.jpg（首先确认此链接可以访问，即相应的 container 和 blob 文件是可以公开访问的）如果经过 CDN 加速的原始图片访问链接 （以上图中所使用的自定义域名为例）
http://imgprocess.yourcompany.cn/container_name/img_name.jpg可以被访问的话，可以确认所有配置生效。
图片处理
图片处理访问规则
通过如下 URL 进行访问：
http://your_CDN_custom_domain/container_name/image_object?basic=<处理字符串>
your_CDN_custom_domain: 用户用来创建图片处理加速类型 CDN 节点的自定义域名，如：imgprocess.yourcompany.cn
container_name: 用户原始图片所在的 Azure Storage container 名字
image_object: 待处理的原始图片名称，如：image.jpg
具体的处理字符串的解释如下。
图片处理语法
处理字符串的详细定义
处理字符串是若干个形如{值}{参数关键字}参数的组合，每个参数之间由_相互连接；
若需要进行格式转换则 Process String 必须以.{目标格式扩展名}结尾
支持的基本图片操作（参数）
| 操作名 | 语法 | 备注 |
|---|---|---|
| 缩放和裁剪 |
|
|
| 高级裁剪 |
|
原图范围以外的裁剪开始位置将导致 400 |
| 区域裁剪 |
|
定义比原图尺寸更大的宽高值将导致返回原图,为空或为零的 |
| 内切圆 |
|
|
| 圆角矩形 |
|
圆角半径不得大于原图最短边边长的一半 |
| 索引裁剪 | |
切片序号从零开始，大于原图的切片设定将使得原图被返回 |
| 旋转 | |
|
| 锐化 |
|
|
| 模糊 | |
|
| 亮度与对比度 |
|
|
| 图像质量 |
|
当且仅当输出格式为 |
| 格式转换 |
|
目前支持的格式包括 |
| 渐进显示 |
|
当且仅当输出格式为 |
| 图片信息 |
|
不得与其他参数共用 |
| 图片EXIF信息 | |
不得与其他参数共用 |
| 图片主色调 |
|
不得与其他参数共用 |
| 管道 |
|
|
| 水印 | 请参阅下方对应小节 | 不得与其他参数共同存在于管道的同一阶段中 |
位置
| 值 | 释义 |
|---|---|
| 1 | 左上 |
| 2 | 顶部 |
| 3 | 右上 |
| 4 | 左侧 |
| 5 | 中央 |
| 6 | 右侧 |
| 7 | 左下 |
| 8 | 底部 |
| 9 | 右下 |
缩放和裁剪
参数
| 名称 | 描述 |
|---|---|
|
取值 1-1000 的整数，表示对宽高进行的处理 |
|
所需图像的高度值和宽度值，必须为不得超过尺寸限制的非负整数 |
|
定义缩放模式的整数，详细介绍请参阅下方表格 |
|
值为 0 或 1 的整数，默认为 0 即不进行其他操作，为1则自动裁剪原图至指定尺寸 |
|
值为 0 或 1 的整数，默认为1即允许将图片缩放至大于原图的尺寸，为 0 则当指定尺寸大于原图时采用原图尺寸 |
|
取值 0-255 的整数数值，分别代表 RGB 色彩空间下填充的颜色红、绿、蓝三通道上的值 |
注意
任何情况下处理的结果不得使图片尺寸大于限制，具体限制请参阅
简介中的限制一节Percentage可以与Height或Width共同使用, 图片将被缩放为指定宽高乘以指定百分比之后的大小Height和Width均可以单独存在，缺失的数值将默认使用原图尺寸Percentage可以单独存在，图片将被缩放为原始尺寸乘以指定百分比之后的大小Cut只有在当其与Height和Width共同存在时才会起效背景色必须与
{ScaleType}4 共同使用
缩放模式
| 值 | 表现 |
|---|---|
| 0 或 不定义 | 锁定宽高比且长边优先 |
| 1 | 锁定宽高比且短边优先 |
| 2 | 强制宽高 |
| 4 | 锁定宽高比且短边优先，并在缩放后以指定颜色填充空白区域（若颜色未指定则自动采用白色填充） |
注意 此处长边与短边的概念基于原始长度 / 目标长度的比值决定.
图片信息响应体
包含至少以下字段的 JSON 对象:
| 名称 | 内容 |
|---|---|
| Width | 图片宽度，单位像素 |
| Height | 图片高度，单位像素 |
| Size | 图片文件尺寸，单位字节 |
| MimeType | 原图文件类型 |
响应体示例
{
"Width": 221,
"Height": 284,
"Size": 119540,
"AveColor": null,
"MimeType": "Jpeg"
}
图片主色调响应体
包含至少以下字段的 JSON 对象:
| 名称 | 内容 |
|---|---|
| RGB | RGB 色彩空间下十六进制表示的图片主色调 |
响应体示例
json
{
"RGB": "273B2A"
}
示例 （持续更新中）
假设 http://imgprocess.yourcompany.cn/container_name/img_name.jpg 是经过 Azure CDN 加速的原始图片 URL
1. 将原始图片缩小到原来的 60%：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p
2. 将原始图片进行圆角矩形处理（圆角半径为 20）：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=20-2ci
3. 将原始图片先缩小到原来的 60%，然后再进行圆角处理（圆角半径为 20）：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci
4. 获取图片信息：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=info
json
{
"Width": 800,
"Height": 400,
"Size": 87341,
"AveColor": null,
"MimeType": "Jpeg"
}
5. 获取图片的 EXIF 信息：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=exif
json
{
"Orientation": 1,
"XResolution": 72.0,
"YResolution": 72.0,
"ResolutionUnit": 2,
"Software": "Adobe Photoshop CS5 Windows",
"DateTime": "2014:04:15 16:43:14",
"ColorSpace": 1,
"PixelXDimension": 800,
"PixelYDimension": 400
}
6. 获取图片主色调：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=imageAve
json
{
"RGB": "0296C8"
}
水印操作
水印功能的处理字符串是一个可以包含以下字段的 Query String：
| 名称 | 描述 |
|---|---|
| watermark | 定义水印类型的整数，取值 1-3，详细释义请参阅下方表格 |
| p | 定义水印位置的整数，取值 1-9，详细释义请参阅上面位置表格 |
| t | 定义水印透明度的整数，当水印类型是图片水印时有效。取值0-100 |
| text | 定义水印文本内容的经过 |
| type | 定义水印文本所采用字体的名称经过 |
| color | 定义水印文本颜色的经过 |
| size | 定义水印文本字号的正整数 |
| object | 图片水印所使用图片的文件名经过 |
注意
- 字段
watermark为必需，且其必须为 Query String 中的第一个字段 - 被用于图片水印的图片必须与原始图片存在于同一个 Azure Storage 账户当中
- Base64 的编码转换可以使用在线工具直接处理，比如 base64encode
- 文本内容和文件名区分大小写，进行 base64 转码时需要注意
水印类型
| 值 | 释义 |
|---|---|
| 1 | 图片水印 |
| 2 | 文字水印 |
支持字体
| 名称 | 释义 | Base64编码 |
|---|---|---|
| dengxian | 等线 | ZGVuZ3hpYW4= |
| fangsong | 仿宋 | ZmFuZ3Nvbmc= |
| fangzhengshuti | 方正舒体 | ZmFuZ3poZW5nc2h1dGk= |
| fangzhengyaoti | 方正姚体 | ZmFuZ3poZW5neWFvdGk= |
| kaiti | 楷体 | a2FpdGk= |
| lishu | 隶书 | bGlzaHU= |
| microsoftyahei | 微软雅黑 | bWljcm9zb2Z0eWFoZWk= |
| microsoftyaheiui | 微软雅黑UI | bWljcm9zb2Z0eWFoZWl1aQ== |
| xinsongti | 新宋体 | eGluc29uZ3Rp |
| heiti | 黑体 | aGVpdGk= |
| songti | 中易宋体 | c29uZ3Rp |
| huawencaiyun | 华文彩云 | aHVhd2VuY2FpeXVu |
| huawenfangsong | 华文仿宋 | aHVhd2VuZmFuZ3Nvbmc= |
| huawenhupo | 华文琥珀 | aHVhd2VuaHVwbw== |
| huawenkaiti | 华文楷体 | aHVhd2Vua2FpdGk= |
| huawenlishu | 华文隶书 | aHVhd2VubGlzaHU= |
| huawensongti | 华文宋体 | aHVhd2Vuc29uZ3Rp |
| huawenxihei | 华文细黑 | aHVhd2VueGloZWk= |
| huawenxingkai | 华文行楷 | aHVhd2VueGluZ2thaQ== |
| huawenxinwei | 华文新魏 | aHVhd2VueGlud2Vp |
| huawenzhongsong | 华文中宋 | aHVhd2Vuemhvbmdzb25n |
| youyuan | 幼圆 | eW91eXVhbg== |
示例
假设水印图片文件存在用 container_name/watermark.jpg，其对应的 Base64 编码为 Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==
1. 将原始图片加入水印图片：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=watermark=1;p=3;s=50;object=Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==
2. 将原始图片先缩小到原来的 60%，然后再进行圆角处理（圆角半径为 20），最后加入图片水印（注意此处使用管道|操作符）：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci|watermark=1;p=3;s=50;object=Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==
3. 将原始图片先缩小到原来的 60%，然后再进行圆角处理（圆角半径为 20），最后加入文字水印（注意此处使用管道|操作符），文字内容为 “Azure China CDN”，字体为“幼圆”：
http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci|watermark=2;p=3;s=50;text=QXp1cmUgQ2hpbmEgQ0RO;type=eW91eXVhbg==
