图片处理是OSS提供的海量、安全、低成本、高可靠的图片处理服务。原始图片上传到OSS后,您可以通过简单的RESTful接口,在任何时间、任何地点、任何互联网设备上对图片进行处理。
说明 图片处理支持的参数请参见
处理参数。
使用图片处理参数处理图片
- 使用单个图片处理参数处理图片
const OSS = require('ali-oss'); const client = new OSS({ // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。 accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // 从STS服务获取的安全令牌(SecurityToken)。 stsToken: 'yourSecurityToken', 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', // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。 endpoint: 'yourEndpoint' }); // 将图片缩放为固定宽高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(); - 使用多个图片处理参数处理图片
使用多个图片处理参数处理图片时,多个参数之间以正斜线(/)分隔。
const OSS = require('ali-oss'); const client = new OSS({ // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。 accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // 从STS服务获取的安全令牌(SecurityToken)。 stsToken: 'yourSecurityToken', 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', // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。 endpoint: 'yourEndpoint', }); // 将图片缩放为固定宽高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管理控制台创建图片样式将多个图片处理参数封装在一个样式中,然后使用样式批量处理图片。具体操作,请参见图片样式。
const OSS = require('ali-oss');
const client = new OSS({
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: 'yourSecurityToken',
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',
// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
endpoint: 'yourEndpoint',
});
// 使用指定图片样式处理目标图片。
async function style () {
try {
// 填写Object完整路径,例如exampledir/exampleobject.jpg。Object完整路径中不能包含Bucket名称。
// yourCustomStyleName填写通过OSS管理控制台创建的图片样式名称。
const result = await client.signatureUrl('exampledir/exampleobject.jpg', {expires: 3600, process: 'style/yourCustomStyleName'});
} catch (e) {
console.log(e);
}
}
style();
图片处理持久化
图片处理服务默认不保存处理后的图片,您可以通过图片处理持久化操作将处理后的图片保存到原图所在Bucket。
以下代码用于图片处理持久化。
const OSS = require('ali-oss');
const client = new OSS({
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: 'yourSecurityToken',
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',
// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
endpoint: 'yourEndpoint'
});
// 填写源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后直接添加图片处理参数。如果您想要对私有文件进行图片处理,需要将图片处理参数加入到签名中,相关的代码示例如下:
const OSS = require('ali-oss');
const client = new OSS({
// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 从STS服务获取的安全令牌(SecurityToken)。
stsToken: 'yourSecurityToken',
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',
// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
endpoint: 'yourEndpoint'
});
// 生成带图片处理参数的文件签名URL,并设置签名URL的过期时间为600秒。
const signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
console.log("signUrl="+signUrl);
图片处理工具
您可以通过可视化图片处理工具ImageStyleViewer直观地看到OSS图片处理结果。