You need to enable JavaScript to run this app.
导航
全站加速
  • 文档首页
    • /全站加速/用户指南/域名管理/图片处理
图片处理
最近更新时间：2024.05.29 17:29:17首次发布时间：2024.05.29 16:57:09
我的收藏

如果您的业务涉及到内容分享网站、电商平台、社交软件、在线教育及素材网站等领域，可能经常需要调整图片尺寸和转换图片格式。全站加速提供图片处理功能，源站只需要存储原始图片，边缘节点可以完成对图片的裁剪、缩放、格式转换。这样可以加快客户端获取被处理过图片的速度，同时减轻源站处理图片的压力，提升访问体验。

使用限制

  • 全站加速能直接处理的图片，原始图片存在以下限制：
    • 原图的大小不超过 10MB。
    • 原图的宽×高不能超过 16,777,216 px。
    • 原图的格式可以是：JPEG、JPG、PNG、WebP、BMP、TIFF。
  • 全站加速处理图片的过程中，处理的逻辑存在以下限制：

    说明

    如果处理图片失败（如解析图片格式失败、图片大小超过限制），那么全站加速将尽量返回原图。

    • 如果设定的目标宽和目标高均超过原图，那么全站加速将响应原图。
    • 如果设定的目标宽或目标高超过原图，那么超过原图的宽或高将被设置成原图对应的值。
    • 裁剪图片时，默认的裁剪原点是图片左上角。
    • 裁剪图片时，改变裁剪位置，图片的宽和高的限制也随之改变。
    • 全站加速不允许对裁剪的图片进行压缩、Range 请求。
  • 全站加速处理后的图片，图片存在以下限制：
    • 处理后图片的宽×高不能超过 16,777,216 px。
    • 图片转换成 WEBP 格式时，图片的宽×高不能超过16,777,216 px，且宽和高单边均不能超过16,384 px。

操作指南

注意

图片处理功能仅为白名单用户提供，如需体验，请联系您的客户经理。

您可以直接在客户端请求 URL 中拼接图片处理相关参数来实现图片的裁剪、缩放、格式转换。URL 的格式如下：
http://example.com/image_01.png?image_process=action,param_value/action,param_value
不同字段的含义如下：

字段

说明

example.com

接入全站加速的加速域名。

image_01.png

待处理原图的名称。原图的格式可以是：JPEG、JPG、PNG、WebP、BMP、TIFF。

image_process

固定参数，表示使用全站加速对图片进行处理。

action,param_value

图片处理的操作 action、参数 param 和值 value。

  • action：对原图进行的操作。您可以将 action 设置为：
    • crop：表示对原图进行裁剪。
    • resize：表示对原图进行缩放。
    • format：表示对原图进行格式转换。
  • 不同的action可设置的参数和值不相同。

图片裁剪

裁剪参数说明

参数

描述

取值

w

裁剪后图片的宽度。不指定时，默认为原图宽度。

宽×高不能超过 16,777,216 px。

h

裁剪后图片的高度。不指定时，默认为原图高度。

x

裁剪过程中，裁剪起点的横坐标。不指定时，默认图片的左上角（原点）作为横坐标起点。

y

裁剪过程中，裁剪起点的纵坐标。不指定时，默认图片的左上角（原点）作为纵坐标起点。

g

裁剪过程中，裁剪的起点。

  • 不指定时，默认图片的左上角原点作为起点。
  • 指定裁剪的起点时，图片将被均匀分成九宫格。每一格的左上角顶点可以作为裁剪的起点。

图片

  • nw：左上
  • north：中上
  • ne：右上
  • west：左中
  • center：中部
  • east：右中
  • sw：左下
  • south：中下
  • se：右下

mid

裁剪过程中，以指定的裁剪起点为中心。按照您制定的宽度、高度对图片进行裁剪。裁剪方式如下：

  • 以起点为中心，对高度值平分上下进行裁剪。
  • 以起点为中心，对宽度值平分左右进行裁剪。
  • 裁剪过程中按照起点超过实际图片范围时，只裁剪到原本图片支持的坐标范围。

不涉及

裁剪示例

对加速域名 example.com 下的 一张大小为 1920*1080 的 PNG 格式图片image_01.png 进行裁剪，示例如下：

裁剪方式

描述

示例

九宫格切

  • 图片裁剪的起点为默认的原点。
  • 裁剪后图片的宽度为300。
  • 裁剪后图片的高度为500。

http(s)://example.com/image01.png?image_process=crop,w_300,h_500

九宫格切

  • 图片裁剪的起点为右下。
  • 裁剪后图片的宽度为600。
  • 裁剪后图片的高度为300。

http(s)://example.com/image01.png?image_process=crop,g_se,w_600,h_300

指定X、Y轴剪切

  • 裁剪过程中，裁剪起点的横坐标是宽度值300的点。
  • 裁剪过程中，裁剪起点的纵坐标是高度值200的点。
  • 裁剪后图片的宽度为600。
  • 裁剪后图片的高度为300。

http(s)://example.com/image01.png?image_process=crop,x_300,y_200,w_600,h_300

图片居中剪切

  • 图片裁剪的起点为左中。
  • 居中裁剪。
  • 裁剪后图片的宽度为600。
  • 裁剪后图片的高度为300。

说明

本示例下，由于起点在左中，图片被裁剪后实际图片宽度值为150。

http(s)://example.com/image01.png?image_process=crop,g_west,mid,w_600,h_300

图片缩放

缩放参数说明

参数

描述

取值

w

  • 目标图片的宽度。
  • 指定 w 值后，目标图片的宽度为 w 的值。目标图片的高度按照宽度的前后缩放比例进行缩放。
  • 如果设定的目标宽超过原图，那么 w 将被设置成原图对应的值，即不缩放。

说明

例如：原始图片：1920*1080, 缩放参数：resize,w_600

  1. 目标图片的宽度为 600。
  2. 缩放比例：1920/600 = 3.2。
  3. 目标图片的高：1080/3.2 = 337.5，取整后为338。

宽×高不能超过16777216 px。

h

  • 目标图片的高度。
  • 指定 h 值后，目标图片高度为 h 的值。目标图片的宽度按照高度的前后缩放比例进行缩放。
  • 如果设定的目标高超过原图，那么 h 将被设置成原图对应的值，即不缩放。

说明

例如：原始图片：1920*1080, 缩放参数：resize,h_300

  1. 目标图片的高度为 300。
  2. 缩放比例：1080/300 = 3.6。
  3. 目标图片的宽：1920/3.6 = 533.3，取整后为533。

l

指定目标图片的长边。具体逻辑如下：

  1. 对比原始图片的宽度和高度。
  2. 数值更大的一边作为目标图片所对应的值。
  3. 数值小的一边，根据缩放比例进行缩放。

说明

例如：原始图片：1920*1080, 缩放参数：resize,l_600。

  1. 原始图片的宽度1920 > 高度1080。
  2. 选择 600 作为目标图片的宽，进行图片的缩放。缩放比例：1920/600 = 3.2
  3. 目标图片的高：1080/3.2 = 337.5，取整后为338。

s

指定目标图片的短边。具体逻辑如下：

  1. 对比原始图片的宽度和高度。
  2. 数值更小的一边作为目标图片所对应的值。
  3. 数值大的一边，根据缩放比例进行缩放。

说明

例如：原始图片：1920*1080, 缩放参数：resize,s_600。

  1. 原始图片的宽度1920 > 高度1080。
  2. 选择 600 作为目标图片的高，进行图片的缩放。缩放比例：1080/600 = 1.8
  3. 目标图片的宽：1920/1.8 = 1066.7，取整后为1067。

fw

指定目标图片的宽度。缩放后不改变图片的高度。

fh

指定目标图片的高度。缩放后不改变图片的宽度。

p

按比例缩放原图。具体逻辑如下：

  1. 设定 p 值，p 的范围是：[0,100]。p 值为0时，不对图片进行缩放。
  2. 计算缩放比例：p/100
  3. 目标图片的宽和高根据缩放比例计算得到。

说明

例如：原始图片：1920*1080, 缩放参数：resize,p_80。

  1. 缩放比例：p/100 = 0.8。
  2. 目标图片的宽：1920*0.8 = 1536。
  3. 目标图片的高：1080*0.8 = 864。

[0,100]

注意事项

  1. 参数 w 和 h 同时存在时，缩放会按照缩放比例更大的一侧来处理图片。

    说明

    例如：原始图片：1920*1080, 缩放参数：resize,w_600,h_300。宽度缩放比：1920/600 = 3.2。高度缩放比：1080/300 = 3.6。
    因此按照高度进行图片的缩放。目标图片的高度：300。缩放比：3.6。目标图片的宽度：1920/3.6 = 533.3，取整后为533。

  2. 参数 w、 h 和 l、s 不能同时存在。同时存在时，仅最后一个参数生效。
  3. fw、fh 同时存在时，强制指定了目标图片的宽度和高度，图片可能会发生变形。

缩放示例

对加速域名 example.com 下的 一张大小为 1920*1080 的 JPEG 格式图片image_01.jepg进行缩放，示例如下：

缩放方式

描述

示例

按照比例缩放原图

缩放比例为0.8，p = 80。

http(s)://example.com/image_01.jepg?image_process=resize,p_80

指定目标图片的长边来缩放原图

resize,l_600
处理逻辑：

  1. 原始图片的宽度1920 > 高度1080。
  2. 选择 600 作为目标图片的宽，进行图片的缩放。缩放比例：1920/600 = 3.2
  3. 目标图片的高：1080/3.2 = 337.5，取整后为338。

http(s)://example.com/image_01.jepg?image_process=resize,l_600

指定目标图片的短边来缩放原图

resize,s_600
处理逻辑：

  1. 原始图片的宽度1920 > 高度1080。
  2. 选择 600 作为目标图片的高，进行图片的缩放。缩放比例：1080/600 = 1.8
  3. 目标图片的宽：1920/1.8 = 1066.7，取整后为1067。

http(s)://example.com/image_01.jepg?image_process=resize,s_600

固定目标图片的宽度来缩放图片

resize,w_600
处理逻辑：

  1. 目标图片的宽度为 600。
  2. 缩放比例：1920/600 = 3.2。
  3. 目标图片的高：1080/3.2 = 337.5，取整后为338。

http(s)://example.com/image_01.jepg?image_process=resize,w_600

固定目标图片的高度来缩放图片

resize,h_300
处理逻辑：

  1. 目标图片的高度为 300。
  2. 缩放比例：1080/300 = 3.6。
  3. 目标图片的宽：1920/3.6 = 533.3，取整后为533。

http(s)://example.com/image_01.jepg?image_process=resize,h_300

指定目标图片的高度和宽度

resize,fw_600,fh_300

  1. 目标图片的高度为 300。
  2. 目标图片的宽度为 600。

http(s)://example.com/image_01.jepg?image_process=resize,fw_600,fh_300

图片格式转换

转换参数说明

参数

描述

jpeg

将原图保存为JPG或JPEG格式。

png

将原图保存为 PNG 格式。

webp

将原图保存为 WEBP 格式。

bmp

将原图保存为 BMP 格式。

tiff

将原图保存为 TIFF 格式。

缩放示例

对加速域名 example.com 下的 一张大小为 1920*1080 的 JPEG 格式图片image_01.jepg 进行格式转换，示例如下：

目标图片格式

示例

PNG

http(s)://example.com/image_01.jepg?image_process=format,png

WEBP

http(s)://example.com/image_01.jepg?image_process=format,webp

BMP

http(s)://example.com/image_01.jepg?image_process=format,bmp

TIFF

http(s)://example.com/image_01.jepg?image_process=format,tiff