图片处理

OSS图片处理，是OSS对外提供的海量、安全、低成本、高可靠的图片处理。用户将原始图片上传保存到OSS，通过简单的 RESTful 接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。图片处理提供图片处理接口，图片上传请使用上传接口。基于OSS图片处理，用户可以搭建自己的图片处理服务。

图片处理基础功能

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

• 获取图片信息
• 图片格式转换
• 图片缩放、裁剪、旋转
• 图片效果
• 图片添加图片、文字、图文混合水印
• 自定义图片处理样式，在控制台的 图片处理 -> 样式管理 中定义
• 通过级联处理调用多个图片处理功能

图片处理使用

图片处理使用标准的 HTTP GET 请求来访问，所有的处理参数是编码在 URL 中的QueyString。

匿名访问

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

通过如下格式的三级域名匿名访问图片处理：

http://bucket.<endpoint>/object?x-oss-process=image/action,param_value

• bucket：用户的存储空间（bucket）名称
• endpoint：用户存储空间所在数据中心的访问域名
• object：用户上传在OSS上的图片文件
• image：图片处理保留标志符
• action：用户对图片做的操作，如缩放、裁剪、旋转等
• param：用户对图片做的操作所对应的参数

例如：

http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

自定义样式，使用如下格式的三级域名匿名访问图片处理：

http://bucket.<endpoint>/object?x-oss-process=x-oss-process=style/name

• style：用户自定义样式系统保留标志符
• name：自定义样式名称，即控制台定义样式的 规则名

例如：

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

通过级联处理，可以对一张图片顺序实施多个操作，格式如下：

http://bucket.<endpoint>/object?x-oss-process=image/action,param_value/action,param_value/...

例如：

http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90

图片服务也支持HTTPS访问，例如：

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

授权访问

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

生成带签名的图片处理的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();

自定义样式

提示：需要事先到oss控制台添加自定义式样example-sytle

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-sytle'});
  } catch (e) {
    console.log(e);
  }
}
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();

图片处理工具

• 可视化图片处理工具 ImageStyleViever ，可以直观的看到OSS图片处理的结果
• OSS图片处理的功能、使用演示 页面