图片处理是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图片处理结果。