图片处理是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: "oss-cn-hangzhou", // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。 accessKeyId: process.env.OSS_ACCESS_KEY_ID, accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET, // yourbucketname填写存储空间名称。 bucket: "examplebucket", }); // 过期时间10分钟,图片处理式样"image/resize,w_300"。 const signUrl = client.signatureUrl("example.png", { 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', // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。 accessKeyId: process.env.OSS_ACCESS_KEY_ID, accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET, // 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); } } scale() // 从坐标(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) } } cut() // 将图片旋转90°。 async function rotate() { try { const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'}); } catch (e) { console.log(e); } } rotate() // 将图片进行锐化,锐化参数为100。 async function sharpen() { try { const result = await client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'}); } catch (e) { console.log(e); } } sharpen() // 在图片中添加水印。 async function watermark() { try { const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'}); } catch (e) { console.log(e); } } watermark() // 将图片进行格式转换。 async function format() { try { const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'}); } catch (e) { console.log(e); } } format() // 获取图片信息。 async function info() { try { const result = await client.get('example.jpg', './example-info.txt', {process: 'image/info'}); } catch (e) { console.log(e); } } info()
自定义样式
说明需要事先到OSS控制台添加自定义式样example-style。
以下代码用于自定义图片样式:
const OSS = require('ali-oss'); const client = new OSS({ // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。 region: 'yourregion', // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。 accessKeyId: process.env.OSS_ACCESS_KEY_ID, accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET, // 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); } } scale() // 从坐标(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) } } cut() // 将图片旋转90°。 async function rotate() { try { const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'}); } catch (e) { console.log(e); } } rotate() // 将图片进行锐化,锐化参数为100。 async function sharpen() { try { const result = await client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'}); } catch (e) { console.log(e); } } sharpen() // 在图片中添加水印。 async function watermark() { try { const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'}); } catch (e) { console.log(e); } } watermark() // 将图片进行格式转换。 async function format() { try { const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'}); } catch (e) { console.log(e); } } format() // 获取图片信息。 async function info() { try { const result = await client.get('example.jpg', './example-info.txt', {process: 'image/info'}); } catch (e) { console.log(e); } } info()
级联处理
以下代码用于级联处理图片:
const OSS = require('ali-oss'); const client = new OSS({ // yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。 region: 'yourregion', // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。 accessKeyId: process.env.OSS_ACCESS_KEY_ID, accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET, // 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',
// 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
accessKeyId: process.env.OSS_ACCESS_KEY_ID,
accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
// 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);
}
// 图片处理持久化:缩放,并设置保存图片处理持久化结果的目标bucket。
processImage("image/resize,m_fixed,w_100,h_100", "target bucket")
// 图片处理持久化:裁剪,并设置保存图片处理持久化结果的目标bucket。
processImage("image/crop,w_100,h_100,x_100,y_100,r_1", "target bucket")
// 图片处理持久化:旋转,并设置保存图片处理持久化结果的目标bucket。
processImage("image/rotate,90", "target bucket")
// 图片处理持久化:锐化,并设置保存图片处理持久化结果的目标bucket。
processImage("image/sharpen,100", "target bucket")
// 图片处理持久化:水印,并设置保存图片处理持久化结果的目标bucket。
processImage("image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ", "target bucket")
// 图片处理持久化:格式转换,并设置保存图片处理持久化结果的目标bucket。
processImage("image/format,jpg", "target bucket")
// 图片处理持久化:格式转换,并设置保存图片处理持久化结果的目标bucket。
processImage("image/format,jpg", "target bucket")
图片处理工具
可视化图片处理工具ImageStyleViewer,可以直观的看到OSS图片处理的结果。