图片处理是OSS提供的海量、安全、低成本、高可靠的图片处理服务。原始图片上传到OSS后，您可以通过简单的RESTful接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。

说明 图片处理支持的参数请参见 处理参数。

使用图片处理参数处理图片

  • 使用单个图片处理参数处理图片
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    const OSS = require('ali-oss');
     
    const client = new OSS({
      // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
      accessKeyId: '<var class="keyword varname" id="varname-8fz-yns-dzs">yourAccessKeyId</var>',
      accessKeySecret: '<var class="keyword varname" id="varname-t3v-tll-rmj">yourAccessKeySecret</var>',
      // 从STS服务获取的安全令牌（SecurityToken）。
      stsToken: '<var class="keyword varname" id="varname-kfg-dvt-m1w">yourSecurityToken</var>',
      refreshSTSToken: async () => {
        // 向您搭建的STS服务获取临时访问凭证。
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // 刷新临时访问凭证的时间间隔，单位为毫秒。
      refreshSTSTokenInterval: 300000,
      // 填写Bucket名称，例如examplebucket。
      bucket: 'examplebucket',
      // <var class="keyword varname" id="varname-fg4-nt5-xqp">yourEndpoint</var>填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
      endpoint: '<var class="keyword varname" id="varname-8pe-wqy-vu2">yourEndpoint</var>'
    });
     
    // 将图片缩放为固定宽高100 px。
    async function scale () {
      try {
        // 填写Object完整路径，例如exampledir/exampleobject.jpg。Object完整路径中不能包含Bucket名称。
        const result = await client.signatureUrl('exampledir/exampleobject.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100'})
      } catch (e) {
        console.log(e);
      }
    }
     
    scale();
  • 使用多个图片处理参数处理图片
    使用多个图片处理参数处理图片时，多个参数之间以正斜线（/）分隔。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    const OSS = require('ali-oss');
     
    const client = new OSS({
      // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
      accessKeyId: '<var class="keyword varname" id="varname-6wf-hli-7nb">yourAccessKeyId</var>',
      accessKeySecret: '<var class="keyword varname" id="varname-9a1-a4p-bu6">yourAccessKeySecret</var>',
      // 从STS服务获取的安全令牌（SecurityToken）。
      stsToken: '<var class="keyword varname" id="varname-4fs-ccz-ge7">yourSecurityToken</var>',
      refreshSTSToken: async () => {
        // 向您搭建的STS服务获取临时访问凭证。
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // 刷新临时访问凭证的时间间隔，单位为毫秒。
      refreshSTSTokenInterval: 300000,
      // 填写Bucket名称，例如examplebucket。
      bucket: 'examplebucket',
      // <var class="keyword varname" id="varname-wex-pj8-gv7">yourEndpoint</var>填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
      endpoint: '<var class="keyword varname" id="varname-zm4-dc1-f3x">yourEndpoint</var>',
    });
     
    // 将图片缩放为固定宽高100 px后，再旋转90°。
    async function resize () {
      try {
        // 填写Object完整路径，例如exampledir/exampleobject.jpg。Object完整路径中不能包含Bucket名称。
        const result = await client.signatureUrl('exampledir/exampleobject.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100/rotate,90'})
      } catch (e) {
        console.log(e);
      }
    }
     
    resize();

使用图片样式处理图片

您可以通过OSS管理控制台创建图片样式将多个图片处理参数封装在一个样式中，然后使用样式批量处理图片。具体操作，请参见图片样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const OSS = require('ali-oss');
 
const client = new OSS({
  // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
  accessKeyId: '<var class="keyword varname" id="varname-nn1-ll3-9i8">yourAccessKeyId</var>',
  accessKeySecret: '<var class="keyword varname" id="varname-be7-ff2-9nt">yourAccessKeySecret</var>',
  // 从STS服务获取的安全令牌（SecurityToken）。
  stsToken: '<var class="keyword varname" id="varname-pav-2tz-shu">yourSecurityToken</var>',
  refreshSTSToken: async () => {
    // 向您搭建的STS服务获取临时访问凭证。
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // 刷新临时访问凭证的时间间隔，单位为毫秒。
  refreshSTSTokenInterval: 300000,
  // 填写Bucket名称，例如examplebucket。
  bucket: 'examplebucket',
  // <var class="keyword varname" id="varname-w2x-zuw-pnv">yourEndpoint</var>填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
  endpoint: '<var class="keyword varname" id="varname-rjr-lak-zme">yourEndpoint</var>',
});
// 使用指定图片样式处理目标图片。
async function style () {
  try {
    // 填写Object完整路径，例如exampledir/exampleobject.jpg。Object完整路径中不能包含Bucket名称。
    // <var class="keyword varname" id="varname-47m-dym-r5f">yourCustomStyleName</var>填写通过OSS管理控制台创建的图片样式名称。
    const result = await client.signatureUrl('exampledir/exampleobject.jpg', {expires: 3600, process: 'style/<var class="keyword varname" id="varname-g4z-6w7-2b5">yourCustomStyleName</var>'});
  } catch (e) {
    console.log(e);
  }
}
 
style();

图片处理持久化

图片处理服务默认不保存处理后的图片，您可以通过图片处理持久化操作将处理后的图片保存到原图所在Bucket。

以下代码用于图片处理持久化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const OSS = require('ali-oss');
 
const client = new OSS({
  // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
  accessKeyId: '<var class="keyword varname" id="varname-u5d-2a2-i80">yourAccessKeyId</var>',
  accessKeySecret: '<var class="keyword varname" id="varname-5y3-smq-fks">yourAccessKeySecret</var>',
  // 从STS服务获取的安全令牌（SecurityToken）。
  stsToken: '<var class="keyword varname" id="varname-sce-5er-ru5">yourSecurityToken</var>',
  refreshSTSToken: async () => {
    // 向您搭建的STS服务获取临时访问凭证。
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // 刷新临时访问凭证的时间间隔，单位为毫秒。
  refreshSTSTokenInterval: 300000,              
  // 填写Bucket名称，例如examplebucket。
  bucket: 'examplebucket',
  // <var class="keyword varname" id="varname-lnp-we9-cvt">yourEndpoint</var>填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
  endpoint: '<var class="keyword varname" id="varname-unt-2ct-zd0">yourEndpoint</var>'
 
});
// 填写源Object完整路径，例如exampledir/exampleobject.jpg。Object完整路径中不能包含Bucket名称。
const sourceImage = 'exampledir/exampleobject.jpg';
// 填写图片处理后的目标Object完整路径，例如exampledir/exampleobject-resize.jpg。Object完整路径中不能包含Bucket名称。
const targetImage = 'exampledir/exampleobject-resize.jpg';
async function processImage(processStr, targetBucket) {
  const result = await client.processObjectSave(
    sourceImage,
    targetImage,
    processStr,
    targetBucket
  );
  console.log(result.res.status);
}
 
// 将原图缩放为固定宽高100 px并保存到原图所在Bucket。
processImage("image/resize,m_fixed,w_100,h_100", "examplebucket")

生成带图片处理参数的文件签名URL

私有文件的访问URL带有签名。OSS不支持在带签名的URL后直接添加图片处理参数。如果您想要对私有文件进行图片处理，需要将图片处理参数加入到签名中，相关的代码示例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const OSS = require('ali-oss');
 
const client = new OSS({
  // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
  accessKeyId: '<var class="keyword varname" id="varname-wz8-q2l-1n5">yourAccessKeyId</var>',
  accessKeySecret: '<var class="keyword varname" id="varname-4rc-yfy-ry9">yourAccessKeySecret</var>',
  // 从STS服务获取的安全令牌（SecurityToken）。
  stsToken: '<var class="keyword varname" id="varname-omb-gfl-5nk">yourSecurityToken</var>',
  refreshSTSToken: async () => {
    // 向您搭建的STS服务获取临时访问凭证。
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // 刷新临时访问凭证的时间间隔，单位为毫秒。
  refreshSTSTokenInterval: 300000,
  // 填写Bucket名称，例如examplebucket。
  bucket: 'examplebucket',
  // <var class="keyword varname" id="varname-qjf-cgx-r50">yourEndpoint</var>填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
  endpoint: '<var class="keyword varname" id="varname-je6-0zk-zer">yourEndpoint</var>'
});
// 生成带图片处理参数的文件签名URL，并设置签名URL的过期时间为600秒。
const signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
console.log("signUrl="+signUrl);

图片处理工具

您可以通过可视化图片处理工具ImageStyleViewer直观地看到OSS图片处理结果。