Image Processing (IMG) は、イメージの処理を支援するためにObject Storage service (OSS) によって提供される、安全で費用対効果の高い信頼性の高いイメージ処理サービスです。 ソース画像をOSSにアップロードした後、RESTful APIを呼び出して、いつでもどこでもインターネットに接続されているデバイスで画像を処理できます。
使用上の注意
WebpackやBrowserifyなどのパッケージングツールを使用する場合は、npm install ali-OSSコマンドを実行して、oss SDK for Browser.jsをインストールします。
ブラウザからOSSバケットにアクセスしたいが、バケットにCORSルールが設定されていない場合、ブラウザはリクエストを拒否します。 したがって、ブラウザからバケットにアクセスする場合は、バケットのCORSルールを設定する必要があります。 詳細については、「インストール」をご参照ください。
ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないようにするには、Security Token Service (STS) から取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。
一時的なアクセス資格情報は、AccessKeyペアとセキュリティトークンで構成されます。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。
IMGパラメータを使用した画像処理
単一のIMGパラメータを使用して画像を処理
<!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>
複数のIMGパラメータを使用した画像処理
次のコードでは、複数のIMGパラメーターを使用してイメージを処理する方法の例を示します。 IMGパラメータはスラッシュ (/) で区切られます。
!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>
イメージスタイルを使用してイメージを処理する
イメージスタイルを作成します。
複数のIMGパラメータをイメージスタイルに追加して、バケットに保存されているイメージに対して複雑な操作を実行できます。 詳細については、「イメージスタイル」をご参照ください。
画像スタイルを使用して画像を処理します。
<!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>
処理された画像を保存する
デフォルトでは、IMGは処理済み画像を保存しません。 [名前を付けて保存] 操作を呼び出して、ソースイメージが保存されているバケットにイメージを保存できます。
次のコードは、処理されたイメージを保存する方法の例を示します。
<!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>
IMGパラメータを含む署名付きオブジェクトURLを生成する
プライベートオブジェクトのURLに署名する必要があります。 IMGパラメーターをイメージの署名付きURLに直接追加することはできません。 プライベートオブジェクトを処理する場合は、署名にIMGパラメーターを追加します。 次のコードは、署名にIMGパラメーターを追加する方法の例を示しています。
<!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>