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

图片处理的详细信息请参见OSS图片处理指南。

图片处理功能

OSS图片处理提供以下功能：

图片处理使用

图片处理使用标准的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>
    参数 描述
    bucket 存储空间名称
    endpoint 存储空间所在地域的访问域名
    object 图片文件名称
    image 图片处理的保留标志符
    action 对图片做的操作，如缩放、裁剪、旋转等
    param 对图片做的操作所对应的参数
    • 基础操作

      例如，将图缩略成宽度为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：

    let OSS = require('ali-oss');
let client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
});
// 过期时间10分钟, 图片处理式样"image/resize,w_300"
let signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
console.log("signUrl="+signUrl);
    说明
    • 授权访问支持 自定义样式、 HTTPS、 级联处理
    • 指定过期时间expires的单位是秒
  • SDK访问

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

    说明 SDK处理图片文件支持 自定义样式、 HTTPS、 级联处理。
    • 基础操作

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

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

let client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
});

// 缩放
async function scale () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100'})
  } catch (e) {
    console.log(e);
  }
}

scale();

// 裁剪
async function crop () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/crop,w_100,h_100,x_100,y_100,r_1'})
  } catch (e) {
    console.log(e);
  }
}

crop();

// 旋转
async function rotate() {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/rotate,90'})
  } catch (e) {
    console.log(e);
  }
}

rotate();

// 锐化
async function sharpen () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/sharpen,100'})
  } catch (e) {
    console.log(e);
  }
}

sharpen();

// 水印
async function watermark () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'})
  } catch (e) {
    console.log(e);
  }
}

watermark();

// 格式转换
async function format () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/format,png'})
  } catch (e) {
    console.log(e);
  }
}

format();

// 图片信息
async function info () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/info})
  } catch (e) {
    console.log(e)
  }
}

info();
    • 自定义样式

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

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

let client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
});

// 自定义样式
async function style () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'style/example-style'});
  } catch (e) {
    console.log(e);
  }
}

style();
      说明 使用以上示例自定义图片样式前，需在OSS控制台中添加自定义样式example-style。
    • 级联处理

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

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

let client = new OSS({
  accessKeyId: '<accessKeyId>',
  accessKeySecret: '<accessKeySecret>',
  bucket: '<bucketName>',
  endpoint: '<endpoint, 例如http://oss-cn-hangzhou.aliyuncs.com>'
});

// 级联处理
async function resize () {
  try {
    let result = await client.signatureUrl('example.jpg', {expires: 3600, process: 'image/resize,m_fixed,w_100,h_100/rotate,90'})
  } catch (e) {
    console.log(e);
  }
}

resize();

图片处理工具

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