すべてのプロダクト
Search
ドキュメントセンター

Object Storage Service:IMG

最終更新日:Dec 05, 2024

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>

イメージスタイルを使用してイメージを処理する

  1. イメージスタイルを作成します。

    複数のIMGパラメータをイメージスタイルに追加して、バケットに保存されているイメージに対して複雑な操作を実行できます。 詳細については、「イメージスタイル」をご参照ください。

  2. 画像スタイルを使用して画像を処理します。

    <!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>