Azure CDN 图片处理

简介

Azure CDN图片处理是由Azure CDN服务提供的一个可靠、安全且经济的图片处理服务。可以实现缩放、裁剪、旋转、锐化、模糊、管道、水印亮度对比、图片格式转换、获取图片信息等功能,灵活适配各种终端大小、不同页面的图片展示样式和水印防盗等需求。

通过 Azure CDN 图片处理,用户可以利用 Azure CDN 服务,在任何时间、从任何位置和设备获取处理过的图片版本。

服务说明

Azure CDN 图片处理是作为 Azure CDN 服务的一个增值功能引入的,所以使用 Azure CDN 图片服务的前提是首先创建一个名为“图片处理”加速类型的 CDN 加速节点。图片服务本身无法作为一个单独 Azure 服务来使用

目前Azure CDN图片服务没有提供相应的图形化管理界面,相应的CDN加速节点创建好之后,直接引用CDN加速域名加上控制图片尺寸、裁剪模式以及质量等图片处理参数,即可访问经过处理的图片版本。

限制

  1. 支持格式转换的文件格式包括 jpg, png, bmp, webp, gif,tif
  2. 图片源文件的大小不可大于 20MB
  3. 处理前后的图片尺寸不得大于 4096 * 4096 像素, 且任意边边长不得大于 4096*4 像素
  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 功能。详情可参考:价格详情
  • 点击 "创建"按钮 Create CDN Profile

    注意 这一步的 Azure 订阅选择注意要和第一步创建 Azure Storage 账户所使用的订阅保持一致,如果图片是存储在 Azure Storage 中。 “Price Tier” 选择上图所示的 S1 Standard,S1 Standard包含新增加的 “image processing” 加速类型。

2. 创建图片处理类型的 CDN 加速节点

Create CDN Endpoint

如上图所示,这一步中的加速类型选择 “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 访问验证

  1. 假设用户的原始图片访问链接为:http://yourstorageaccount.blob.core.chinacloudapi.cn/container_name/img_name.jpg (首先确认此链接可以访问,即相应的 container 和 blob 文件是可以公开访问的)

  2. 如果经过 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 必须以.{目标格式扩展名}结尾

支持的基本图片操作(参数)

操作名 语法 备注
缩放和裁剪

{Percentage}p,{Height}h,{Width}w,{ScaleType}e,{Cut}c,{HandleIfLarger}l,{Red}-{Green}-{Blue}bgc。若要使用 {Red}-{Green}-{Blue}bgc 参数,请必须与 {ScaleType}e{Height}h,{Width}w 参数一起使用。详情请参阅下方表格

高级裁剪

{x}-{y}-{Width}-{Height}a, 其中 {x}{y} 分别定义了裁剪开始位置的横纵坐标(以原图左上角的像素为原点),{Width}{Height} 分别定义了裁剪区域的宽高, 取值 1-4096

原图范围以外的裁剪开始位置将导致 400Bad Request,超过原图范围或指定宽高为零的裁剪将裁减到原图结束位置

区域裁剪

{Width}x{Height}-{Position}rc, 其中 {Width}{Height} 分别定义了裁剪区域的宽高, 取值 0-4096,裁剪将按照 {Position} 定义的对其方式进行,不同取值的含义请参阅下方表格

定义比原图尺寸更大的宽高值将导致返回原图,为空或为零的 HeightWidth 表示使用原图的宽或高

内切圆

{Radius}-{Type}ci, 其中 {Radius} 指定了内切圆的半径,{Type}: 为取值0或1的整数,若为 1,则将图像裁剪为能容纳内切圆的最小正方形后返回,否则不进行裁剪

圆角矩形

{Radius}-2ci, 其中 {Radius} 指定了圆角的半径

圆角半径不得大于原图最短边边长的一半
索引裁剪

{length}x-{index}ic{length}y-{index}ic,分别对应以横坐标或纵坐标进行切片,将返回前若干片 Slice 组成的图像,其中 {Length} 为切片的宽度,{index} 为返回的切片的序号

切片序号从零开始,大于原图的切片设定将使得原图被返回
旋转

{Degree}r, 其中 {Degree} 为图片顺时针旋转的度数

锐化

{Degree}sh, 其中 {Degree} 为指定锐化程度的非负整数

模糊

{Radius}-{Sigma}bl, 其中 {Radius} 为模糊半径,{Sigma} 为模糊标准差

亮度与对比度

{Brightness}b,{Contrast}d, 其中 {Brightness} 为一个可以为负的整数,表示亮度相对原图进行的调整, 同时 {Contrast} 是一个可以为负的整数,表示对比度相对原图进行的调整

图像质量

{Degree}q, 其中 {Degree} 为表示图像质量的整数值,取值0-100

当且仅当输出格式为 jpg/jpeg 时有效

格式转换

.{format}, 其中 {format} 为目标格式

目前支持的格式包括 jpg,jpeg,png,webpgif

渐进显示

{Setting}pr, 其中 {Setting} 是一个取值0-1的整数,当其为1时,图像将随着加载的进行渐进呈现给用户

当且仅当输出格式为 jpg/jpeg 时有效

图片信息

info, 返回 JSON 格式图片信息,详情请参阅下方对应小节

不得与其他参数共用
图片EXIF信息

exif, 返回 JSON 格式图片 EXIF 信息,详情请参阅下方 API 示例

不得与其他参数共用
图片主色调

imageAve, 返回 JSON 格式图片主色调信息,详情请参阅下方对应小节

不得与其他参数共用
管道

{Process1}|{Process2}, 其中 Process1Process2 均为处理字符串并且图片会先被按照 Process1 定义的操作流程进行处理,而后按照 Process2 所定义的操作流程进行处理

Process 可以为图片信息``EXIF 信息图片主色调以外的任何上述参数

水印 请参阅下方对应小节 不得与其他参数共同存在于管道的同一阶段中

位置

释义
1 左上
2 顶部
3 右上
4 左侧
5 中央
6 右侧
7 左下
8 底部
9 右下

缩放和裁剪

参数

名称 描述

{Percentage}

取值 1-1000 的整数,表示对宽高进行的处理

{Height},{Width}

所需图像的高度值和宽度值,必须为不得超过尺寸限制的非负整数

{ScaleType}

定义缩放模式的整数,详细介绍请参阅下方表格

{Cut}

值为 0 或 1 的整数,默认为 0 即不进行其他操作,为1则自动裁剪原图至指定尺寸

{HandleIfLarger}

值为 0 或 1 的整数,默认为1即允许将图片缩放至大于原图的尺寸,为 0 则当指定尺寸大于原图时采用原图尺寸

{Red},{Green}{Blue}

取值 0-255 的整数数值,分别代表 RGB 色彩空间下填充的颜色红、绿、蓝三通道上的值

注意

  • 任何情况下处理的结果不得使图片尺寸大于限制,具体限制请参阅简介中的限制一节

  • Percentage可以与 HeightWidth 共同使用, 图片将被缩放为指定宽高乘以指定百分比之后的大小

  • HeightWidth 均可以单独存在,缺失的数值将默认使用原图尺寸

  • Percentage 可以单独存在,图片将被缩放为原始尺寸乘以指定百分比之后的大小

  • Cut 只有在当其与 HeightWidth 共同存在时才会起效

  • 背景色必须与 {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

Raw image

1. 将原始图片缩小到原来的 60%:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p

Image 60p

2. 将原始图片进行圆角矩形处理(圆角半径为 20):

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=20-2ci

Image 20-2ci

3. 将原始图片先缩小到原来的 60%,然后再进行圆角处理(圆角半径为 20):

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci 

Image 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

定义水印文本内容的经过 Base64 编码的字符串

type

定义水印文本所采用字体的名称经过 Base64 编码的字符串,支持字体请参阅下方表格

color

定义水印文本颜色的经过 Base64 编码的 8 位 RGB 色彩空间下的六位十六进制数字。比如白色,值为ffffffBase64 编码后为 ZmZmZmZm,

size 定义水印文本字号的正整数
object

图片水印所使用图片的文件名经过 Base64 编码的字符串

注意

  • 字段 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==

watermark raw

1. 将原始图片加入水印图片:

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=watermark=1;p=3;s=50;object=Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==

watermark

2. 将原始图片先缩小到原来的 60%,然后再进行圆角处理(圆角半径为 20),最后加入图片水印(注意此处使用管道|操作符):

http://imgprocess.yourcompany.cn/container_name/img_name.jpg?basic=60p_20-2ci|watermark=1;p=3;s=50;object=Y29udGFpbmVyX25hbWUvd2F0ZXJtYXJrLmpwZw==

watermark and scale

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==

watermark, scale and round