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

图片处理使用

图片处理使用标准的HTTP GET请求。您可以在URL的QueryString中设置处理参数。

如果图片文件的访问权限为私有,必须通过授权才能进行访问。

  • 匿名访问

    如果图片文件(Object)的访问权限是公共读,如下表所示的权限,则可以匿名访问图片服务。

    Bucket权限 Object权限
    公共读私有写(public-read)或公共读写(public-read-write) 默认(default)
    任意权限 公共读私有写(public-read)或公共读写(public-read-write)

    您可以通过如下格式的三级域名匿名访问处理后的图片:

    http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=image/<yourAction>,<yourParamValue>
    参数 描述
    yourBucketName 存储空间名称
    yourEndpoint 存储空间所在地域的访问域名
    yourObjectName 图片文件名称
    image 图片处理的保留标志符
    yourAction 对图片做的操作,如缩放、裁剪、旋转等
    yourParamValue 对图片做的操作所对应的参数
    • 基础操作

      例如,将图缩略成宽度为100,高度按比例处理:

      http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100
    • 自定义样式

      使用如下格式的三级域名匿名访问图片处理:

      http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=style/<yourStyleName>
      • style:自定义样式的保留标志符。
      • yourStyleName:自定义样式名称,即通过控制台自定义样式的规则名称。

      例如:

      http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100
    • 级联处理

      通过级联处理,可以对一张图片顺序进行多个操作,格式如下:

      http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=image/<yourAction1>,<yourParamValue1>/<yourAction2>,<yourParamValue2>/...

      例如:

      http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90
    • 支持HTTPS访问

      图片服务支持HTTPS访问,例如:

      https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100
  • 授权访问

    对私有权限的文件(Object),如下表所示的权限,必须通过授权才能访问图片服务。

    Bucket权限 Object权限
    私有(private) 默认权限(default)
    任意权限 私有(private)

    以下代码用于生成带签名的图片处理URL:

    const OSS = require('ali-oss');
    
    const client = new OSS({
      // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
      region: 'yourregion',
      // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // yourbucketname填写存储空间名称。
      bucket: 'yourbucketname'
    });
    // 过期时间10分钟,图片处理式样"image/resize,w_300"。
    const signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
    console.log("signUrl="+signUrl);
    说明
    • 授权访问支持自定义样式、HTTPS、以及级联处理。
    • 指定过期时间expires的单位是秒。
  • SDK访问

    对于任意权限的图片文件,都可以直接使用SDK访问和处理。

    SDK处理图片文件支持自定义样式、HTTPS和级联处理。

    • 基础操作

      以下代码展示了图片处理的基础操作:

      const OSS = require('ali-oss');
      
      const client = new OSS({
        // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
        region: 'yourregion',
        // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // yourbucketname填写存储空间名称。
        bucket: 'yourbucketname'
      });
      // 将图片缩放为固定宽高100 px。
      async function scale () {
        try {
          const result = await client.get('example.jpg', './example-resize.jpg', { process: 'image/resize,m_fixed,w_100,h_100'});
        } catch (e) {
          console.log(e);
        }
      }
      // 从坐标(100,100)开始,将图片裁剪为宽高100 px。
      async function cut () {
        try {
           const result = await client.get('example.jpg', './example-crop.jpg', { process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
        } catch (e) {
          console.log(e)
        }
      }
      // 将图片旋转90°。
      async function rotate () {
        try {
          const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
        } catch (e) {
          console.log(e);
        }
      }
      // 将图片进行锐化,锐化参数为100。
      async function sharpen () {
        try {
          const result = yield client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'});
        } catch (e) {
          console.log(e);
        }
      }
      // 在图片中添加水印。
      async function watermark () {
        try {
          const result = yield client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
        } catch (e) {
          console.log(e);
        }
      }
      // 将图片进行格式转换。
      async function format () {
        try {
          const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
        } catch (e) {
          console.log(e);
        }
      }
      // 获取图片信息。
      async function info () {
        try {
          const result = await client.get('example.jpg', './example-info.txt', {process: 'image/info'});
        } catch (e) {
          console.log(e);
        }
      }
    • 自定义样式
      说明 需要事先到OSS控制台添加自定义式样example-style。

      以下代码用于自定义图片样式:

      const OSS = require('ali-oss');
      
      const client = new OSS({
        // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
        region: 'yourregion',
        // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // yourbucketname填写存储空间名称。
        bucket: 'yourbucketname'
      });
      // 自定义样式。
      async function style () {
        try {
          const result = await client.get('example.jpg', './example-custom-style.jpg', {process: 'style/example-style"'});
        } catch (e) {
          console.log(e);
        }
      }
      style();
    • 级联处理

      以下代码用于级联处理图片:

      const OSS = require('ali-oss');
      
      const client = new OSS({
        // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
        region: 'yourregion',
        // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // yourbucketname填写存储空间名称。
        bucket: 'yourbucketname'
      });
      
      // 级联处理
      async function cascade () {
        try {
          const result = await client.get('example.jpg', './example-cascade.jpg', {process: 'image/resize,m_fixed,w_100,h_100/rotate,90'});
        } catch (e) {
          console.log(e);
        }
      }
      cascade();

图片处理持久化

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

const OSS = require('ali-oss');

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // yourbucketname填写存储空间名称。
  bucket: 'yourbucketname'
});

const sourceImage = 'sourceObject.png';
const targetImage = 'targetObject.jpg';
async function processImage(processStr, targetBucket) {
  const result = await client.processObjectSave(
    sourceImage,
    targetImage,
    processStr,
    targetBucket
  );
  console.log(result.res.status);
}

// 图片处理持久化:缩放。
processImage("image/resize,m_fixed,w_100,h_100")

// 图片处理持久化:裁剪。
processImage("image/crop,w_100,h_100,x_100,y_100,r_1")

// 图片处理持久化:旋转。
processImage("image/rotate,90")

// 图片处理持久化:锐化。
processImage("image/sharpen,100")

// 图片处理持久化:水印。
processImage("image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ")

// 图片处理持久化:格式转换。
processImage("image/format,jpg")

// 图片处理持久化:格式转换,并设置保存图片处理持久化结果的目标bucket。
processImage("image/format,jpg", "target bucket")

相关文档

  • 关于图片处理支持的参数说明,请参见处理参数
  • 关于图片处理的完整示例代码,请参见GitHub示例