Image Processing (IMG) provided by Object Storage Service (OSS) is a secure, cost-effective, and highly reliable image processing service that can process large amounts of data. After you upload source images to OSS, you can call RESTful APIs to process the images anytime, anywhere, and on all Internet devices.

Note For more information about IMG parameters, see Parameters.

Use IMG parameters to process images

  • Use a single IMG parameter to process images
    const OSS = require('ali-oss');

const client = new OSS({
  // Obtain a temporary AccessKey pair from Security Token Service (STS). 
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // Obtain a security token from STS. 
  stsToken: 'yourSecurityToken',
  refreshSTSToken: async () => {
    // Obtain a temporary access credential from the STS you set up. 
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // Set the time interval at which to refresh the temporary access credential. Unit: milliseconds. 
  refreshSTSTokenInterval: 300000,
  // Specify the name of the bucket that contains the object you want to access. Example: examplebucket. 
  bucket: 'examplebucket',
  // Set yourEndpoint to the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set yourEndpoint to https://oss-cn-hangzhou.aliyuncs.com. 
  endpoint: 'yourEndpoint'
});

// Resize the image to the height and width of 100 pixels. 
async function scale () {
  try {
    // Specify the full path of the object. Example: exampledir/exampleobject.jpg. The full path of the object cannot contain bucket names. 
    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();
  • Use multiple IMG parameters to process images
    When you use multiple IMG parameters to process the image, separate these parameters with forward slashes (/). 
    const OSS = require('ali-oss');

const client = new OSS({
  // Obtain a temporary AccessKey pair from STS. 
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // Obtain a security token from STS. 
  stsToken: 'yourSecurityToken',
  refreshSTSToken: async () => {
    // Obtain a temporary access credential from the STS you set up. 
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // Set the time interval at which to refresh the temporary access credential. Unit: milliseconds. 
  refreshSTSTokenInterval: 300000,
  // Specify the name of the bucket that contains the object you want to access. Example: examplebucket. 
  bucket: 'examplebucket',
  // Set yourEndpoint to the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set yourEndpoint to https://oss-cn-hangzhou.aliyuncs.com. 
  endpoint: 'yourEndpoint',
});

// After you resize the image to the height and width of 100 pixels, rotate the image 90 degrees. 
async function resize () {
  try {
    // Specify the full path of the object. Example: exampledir/exampleobject.jpg. The full path of the object cannot contain bucket names. 
    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();

Use image styles to process images

You can create an image style in the OSS console and encapsulate multiple IMG parameters in the style. Then, you can use the style to process an image. For more information, see Image style. 

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

const client = new OSS({
  // Obtain a temporary AccessKey pair from STS. 
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // Obtain a security token from STS. 
  stsToken: 'yourSecurityToken',
  refreshSTSToken: async () => {
    // Obtain a temporary access credential from the STS you set up. 
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // Set the time interval at which to refresh the temporary access credential. Unit: milliseconds. 
  refreshSTSTokenInterval: 300000,
  // Specify the name of the bucket that contains the object you want to access. Example: examplebucket. 
  bucket: 'examplebucket',
  // Set yourEndpoint to the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set yourEndpoint to https://oss-cn-hangzhou.aliyuncs.com. 
  endpoint: 'yourEndpoint',
});
// Use the specified image style to process the image. 
async function style () {
  try {
    // Specify the full path of the object. Example: exampledir/exampleobject.jpg. The full path of the object cannot contain bucket names. 
    // Set yourCustomStyleName to the name of the image style you create in the OSS console. 
    const result = await client.signatureUrl('exampledir/exampleobject.jpg', {expires: 3600, process: 'style/yourCustomStyleName'});
  } catch (e) {
    console.log(e);
  }
}

style();

Save processed images

By default, IMG does not save processed images. You can call the Save As operation to save the images to the bucket where the source images are stored.

The following code provides an example on how to save a processed image: 

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

const client = new OSS({
  // Obtain a temporary AccessKey pair from STS. 
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // Obtain a security token from STS. 
  stsToken: 'yourSecurityToken',
  refreshSTSToken: async () => {
    // Obtain a temporary access credential from the STS you set up. 
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // Set the time interval at which to refresh the temporary access credential. Unit: milliseconds. 
  refreshSTSTokenInterval: 300000,               
  // Specify the name of the bucket that contains the object you want to access. Example: examplebucket. 
  bucket: 'examplebucket',
  // Set yourEndpoint to the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set yourEndpoint to https://oss-cn-hangzhou.aliyuncs.com. 
  endpoint: 'yourEndpoint'

});
// Specify the full path of the source object. Example: exampledir/exampleobject.jpg. The full path of the object cannot contain bucket names. 
const sourceImage = 'exampledir/exampleobject.jpg';
// Specify the full path of the processed object. Example: exampledir/exampleobject-resize.jpg. The full path of the object cannot contain bucket names. 
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);
}

// Resize the source image to a height and width of 100 pixels and save the image to the bucket that contains the source image. 
processImage("image/resize,m_fixed,w_100,h_100", "examplebucket")

Generate a signed object URL that includes IMG parameters

URLs of private objects must be signed. IMG parameters cannot be added to a signed URL. If you want to process a private object, add IMG parameters to the signature. The following code provides an example on how to add IMG parameters to the signature:
const OSS = require('ali-oss');

const client = new OSS({
  // Obtain a temporary AccessKey pair from STS. 
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // Obtain a security token from STS. 
  stsToken: 'yourSecurityToken',
  refreshSTSToken: async () => {
    // Obtain a temporary access credential from the STS you set up. 
    const info = await fetch('your_sts_server');
    return {
      accessKeyId: info.accessKeyId,
      accessKeySecret: info.accessKeySecret,
      stsToken: info.stsToken
    }
  },
  // Set the time interval at which to refresh the temporary access credential. Unit: milliseconds. 
  refreshSTSTokenInterval: 300000,
  // Specify the name of the bucket that contains the object you want to access. Example: examplebucket. 
  bucket: 'examplebucket',
  // Set yourEndpoint to the endpoint of the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set yourEndpoint to https://oss-cn-hangzhou.aliyuncs.com. 
  endpoint: 'yourEndpoint'
});
// Generate a signed object URL that includes IMG parameters. Set the validity period of the signed URL to 600 seconds. 
const signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
console.log("signUrl="+signUrl);