Image Processing (IMG) is a secure, cost-effective, and highly reliable image processing service that is provided by Object Storage Service (OSS) to help you process images. After you upload source images to OSS, you can call RESTful API operations to process the images on a device that is connected to the Internet anytime, anywhere.
Usage notes
When you use packaging tools such as Webpack and Browserify, install OSS SDK for Browser.js by running the npm install ali-oss command.
If you want to access an OSS bucket from a browser but no CORS rules are configured for the bucket, the browser rejects the request. Therefore, you must configure CORS rules for a bucket if you want to access the bucket from a browser. For more information, see Installation.
In most cases, OSS SDK for Browser.js is used in browsers. To prevent your AccessKey pair from being exposed, we recommend that you use temporary access credentials obtained from Security Token Service (STS) to access OSS.
The temporary access credentials consist of an AccessKey pair and a security token. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. For more information about how to obtain temporary access credentials, see Use STS for temporary access authorization.
Use IMG parameters to process images
Use a single IMG parameter to process images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Import the SDK file -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// Specify the temporary AccessKey pair obtained from Security Token Service (STS). The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token obtained from STS.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from the STS that 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 credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "yourRegion",
});
// Resize the image to a height and width of 100 pixels.
async function scale() {
try {
// Specify the full path of the object. Example: exampledir/exampleobject.jpg. Do not include the bucket name in the full path.
const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
expires: 3600,
process: "image/resize,m_fixed,w_100,h_100",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
scale();
</script>
</body>
</html>
Use multiple IMG parameters to process images
The following code provides an example on how to use multiple IMG parameters to process an image. IMG parameters are separated by forward slashes (/).
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Import the SDK file -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token obtained from STS.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from the STS that 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 credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "oss-cn-hangzhou",
});
// Resize the image to a height and width of 100 pixels, and rotate the image 90 degrees.
async function resize() {
try {
// Specify the full path of the object. Example: exampledir/exampleobject.jpg. Do not include the bucket name in the full path.
const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
expires: 3600,
process: "image/resize,m_fixed,w_100,h_100/rotate,90",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
resize();
</script>
</body>
</html>
Use an image style to process an image
Create an image style.
You can add multiple IMG parameters to an image style to perform complex operations on images that are stored in a bucket. For more information, see Image styles.
Use the image style to process images.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <!-- Import the SDK file --> <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js" ></script> <script type="text/javascript"> const client = new OSS({ authorizationV4: true, // Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // Specify the security token obtained from STS. stsToken: 'yourSecurityToken', refreshSTSToken: async () => { // Obtain temporary access credentials from the STS that 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 credentials. Unit: milliseconds. refreshSTSTokenInterval: 300000, // Specify the name of the bucket. Example: examplebucket. bucket: "examplebucket", // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. region: "oss-cn-hangzhou", }); // Resize the image to a height and width of 100 pixels, and rotate the image 90 degrees. async function style() { try { // Specify the full path of the object. Example: exampledir/exampleobject.jpg. Do not include the bucket name in the full path. const result = await client.signatureUrl("exampledir/exampleobject.jpg", { expires: 3600, // Set yourCustomStyleName to the name of the image style that was created in Step 1. process: "style/yourCustomStyleName", }); console.log(result); } catch (e) { console.log(e); } } style(); </script> </body> </html>
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Import the SDK file -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token obtained from STS.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from the STS that 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 credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "oss-cn-hangzhou",
});
// Specify the full path of the source object. Example: exampledir/src.png. Do not include the bucket name in the full path.
const sourceImage = "exampledir/src.png";
// Specify the full path of the processed object. Example: exampledir/dest.png. Do not include the bucket name in the full path.
const targetImage = "exampledir/dest.png";
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");
</script>
</body>
</html>
Generate a signed object URL that includes IMG parameters
URLs of private objects must be signed. IMG parameters cannot be directly added to a signed URL of an image. 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- Import the SDK file -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token obtained from STS.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from the STS that 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 credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "oss-cn-hangzhou",
});
// Generate a signed object URL that includes IMG parameters. Set the validity period of the signed URL to 600 seconds. (The maximum validity period is 32400s.)
const signUrl = client.signatureUrl("oss.png", {
expires: 600,
process: "image/resize,w_300",
});
console.log("signUrl=" + signUrl);
</script>
</body>
</html>