Image processing is a scalable, secure, cost-effective, and highly reliable service offered by OSS. After you upload an image to OSS, you can process it on any internet-connected device using simple RESTful interfaces.
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.
Process images using image processing parameters
Process an image using a single image processing parameter
<!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,
// Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Obtain a security token (SecurityToken) from the STS service.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from your STS service.
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// The interval to refresh temporary access credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the bucket name. For example, examplebucket.
bucket: "examplebucket",
// Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "yourRegion",
});
// Scale the image to a fixed width and height of 100 px.
async function scale() {
try {
// Specify the full path of the object. For example, exampledir/exampleobject.jpg. The full path cannot contain the bucket name.
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>
Process an image using multiple image processing parameters
To use multiple image processing parameters, separate them with a forward slash (/).
!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,
// Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Obtain a security token (SecurityToken) from the STS service.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from your STS service.
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// The interval to refresh temporary access credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the bucket name. For example, examplebucket.
bucket: "examplebucket",
// Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "oss-cn-hangzhou",
});
// Scale the image to a fixed width and height of 100 px, and then rotate it by 90 degrees.
async function resize() {
try {
// Specify the full path of the object. For example, exampledir/exampleobject.jpg. The full path cannot contain the bucket name.
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>
Process images using image styles
Create an image style.
You can add multiple image processing parameters to a style to perform complex image processing operations. For more information, see Image styles.
Process an image using the image style.
<!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, // Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service. accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // Obtain a security token (SecurityToken) from the STS service. stsToken: 'yourSecurityToken', refreshSTSToken: async () => { // Obtain temporary access credentials from your STS service. const info = await fetch("your_sts_server"); return { accessKeyId: info.accessKeyId, accessKeySecret: info.accessKeySecret, stsToken: info.stsToken, }; }, // The interval to refresh temporary access credentials. Unit: milliseconds. refreshSTSTokenInterval: 300000, // Specify the bucket name. For example, examplebucket. bucket: "examplebucket", // Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou. region: "oss-cn-hangzhou", }); // Scale the image to a fixed width and height of 100 px, and then rotate it by 90 degrees. async function style() { try { // Specify the full path of the object. For example, exampledir/exampleobject.jpg. The full path cannot contain the bucket name. const result = await client.signatureUrl("exampledir/exampleobject.jpg", { expires: 3600, // Replace yourCustomStyleName with the name of the image style that you created in Step 1. process: "style/yourCustomStyleName", }); console.log(result); } catch (e) { console.log(e); } } style(); </script> </body> </html>
Image processing persistence
By default, the image processing service does not save processed images. You can use the image processing persistence feature to save a processed image to the same bucket as the source image.
The following code provides an example of how to use image processing persistence.
<!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,
// Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Obtain a security token (SecurityToken) from the STS service.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from your STS service.
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// The interval to refresh temporary access credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the bucket name. For example, examplebucket.
bucket: "examplebucket",
// Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "oss-cn-hangzhou",
});
// Specify the full path of the source object. For example, exampledir/src.png. The full path cannot contain the bucket name.
const sourceImage = "exampledir/src.png";
// Specify the full path of the destination object for the processed image. For example, exampledir/dest.png. The full path cannot contain the bucket name.
const targetImage = "exampledir/dest.png";
async function processImage(processStr, targetBucket) {
const result = await client.processObjectSave(
sourceImage,
targetImage,
processStr,
targetBucket
);
console.log(result.res.status);
}
// Scale the source image to a fixed width and height of 100 px and save it to the source bucket.
processImage("image/resize,m_fixed,w_100,h_100", "examplebucket");
</script>
</body>
</html>
Generate a signed URL for a file with image processing parameters
When you access a private file using its URL, a signature is required. You cannot add image processing parameters directly to a signed URL. To process a private image, you must add the image processing parameters to the signature. The following code provides an example:
<!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,
// Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Obtain a security token (SecurityToken) from the STS service.
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// Obtain temporary access credentials from your STS service.
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// The interval to refresh temporary access credentials. Unit: milliseconds.
refreshSTSTokenInterval: 300000,
// Specify the bucket name. For example, examplebucket.
bucket: "examplebucket",
// Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "oss-cn-hangzhou",
});
// Generate a signed URL for a file with image processing parameters and set the expiration time of the signed URL to 600s. The maximum expiration time is 32400s.
const signUrl = client.signatureUrl("oss.png", {
expires: 600,
process: "image/resize,w_300",
});
console.log("signUrl=" + signUrl);
</script>
</body>
</html>