IMG - Object Storage Service - Alibaba Cloud ドキュメントセンター

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> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // Security Token Service (STS) から取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: 'yourAccessKeyId' 、
        accessKeySecret: 'yourAccessKeySecret' 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        refreshSTSToken: async () => {
          // 設定したSTSから一時的なアクセス資格情報を取得します。 
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId、
            accessKeySecret: info.accessKeySecret、
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
        リフレッシュSTokenInterval: 300000、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: "yourRegion" 、
      });

      // 画像のサイズを100ピクセルの高さと幅に変更します。 
      async関数scale() {
        try {
          // オブジェクトのフルパスを指定します。 例: exampledir/exampleobject.jpg バケット名をフルパスに含めないでください。 
          const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
            有効期限: 3600、
            プロセス: "image/resize,m_fixed,w_100,h_100",
          });
          console.log (結果);
        } catch (e) {
          console.log(e);
        }
      }

      scale();
    </script>
  </body>
</html>

複数のIMGパラメータを使用した画像処理

次のコードでは、複数のIMGパラメーターを使用してイメージを処理する方法の例を示します。 IMGパラメータはスラッシュ (/) で区切られます。

! DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: 'yourAccessKeyId' 、
        accessKeySecret: 'yourAccessKeySecret' 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        refreshSTSToken: async () => {
          // 設定したSTSから一時的なアクセス資格情報を取得します。 
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId、
            accessKeySecret: info.accessKeySecret、
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
        リフレッシュSTokenInterval: 300000、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        リージョン: "oss-cn-hangzhou" 、
      });

      // 画像のサイズを100ピクセルの高さと幅に変更し、画像を90度回転させます。 
      async関数resize() {
        try {
          // オブジェクトのフルパスを指定します。 例: exampledir/exampleobject.jpg バケット名をフルパスに含めないでください。 
          const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
            有効期限: 3600、
            プロセス: "image/resize,m_fixed,w_100,h_100/rotate,90",
          });
          console.log (結果);
        } catch (e) {
          console.log(e);
        }
      }

      resize();
    </script>
  </body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: 'yourAccessKeyId' 、
        accessKeySecret: 'yourAccessKeySecret' 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        refreshSTSToken: async () => {
          // 設定したSTSから一時的なアクセス資格情報を取得します。 
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId、
            accessKeySecret: info.accessKeySecret、
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
        リフレッシュSTokenInterval: 300000、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        リージョン: "oss-cn-hangzhou" 、
      });

      // 画像のサイズを100ピクセルの高さと幅に変更し、画像を90度回転させます。 
      async関数style() {
        try {
          // オブジェクトのフルパスを指定します。 例: exampledir/exampleobject.jpg バケット名をフルパスに含めないでください。 
          const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
            有効期限: 3600、
            // 手順1で作成したイメージスタイルの名前にyourCustomStyleNameを設定します。 
            プロセス: "style/yourCustomStyleName" 、
          });
          console.log (結果);
        } catch (e) {
          console.log(e);
        }
      }

      style();
    </script>
  </body>
</html>

処理された画像を保存する

デフォルトでは、IMGは処理済み画像を保存しません。 [名前を付けて保存] 操作を呼び出して、ソースイメージが保存されているバケットにイメージを保存できます。

次のコードは、処理されたイメージを保存する方法の例を示します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: 'yourAccessKeyId' 、
        accessKeySecret: 'yourAccessKeySecret' 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        refreshSTSToken: async () => {
          // 設定したSTSから一時的なアクセス資格情報を取得します。 
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId、
            accessKeySecret: info.accessKeySecret、
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
        リフレッシュSTokenInterval: 300000、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        リージョン: "oss-cn-hangzhou" 、
      });

      // ソースオブジェクトのフルパスを指定します。 例: exampledir/src.png バケット名をフルパスに含めないでください。 
      const sourceImage = "exampledir/src.png";
      // 処理されたオブジェクトのフルパスを指定します。 例: exampledir/dest.png バケット名をフルパスに含めないでください。 
      const targetImage = "exampledir/dest.png";
      async関数processImage(processStr, targetBucket) {
        const result = await client.processObjectSave ()
          sourceImage,
          targetImage,
          processStr,
          targetBucket
        );
        console.log(result.res.status);
      }

      // ソースイメージを100ピクセルの高さと幅にサイズ変更し、ソースイメージを含むバケットに保存します。 
      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> ドキュメント </title>
  </head>

  <body>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: 'yourAccessKeyId' 、
        accessKeySecret: 'yourAccessKeySecret' 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        refreshSTSToken: async () => {
          // 設定したSTSから一時的なアクセス資格情報を取得します。 
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId、
            accessKeySecret: info.accessKeySecret、
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
        リフレッシュSTokenInterval: 300000、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        リージョン: "oss-cn-hangzhou" 、
      });

      // IMGパラメータを含む署名付きオブジェクトURLを生成します。 署名付きURLの有効期間を600秒に設定します。 
      const signUrl = client.signatureUrl("oss.png", {
        有効期限: 600、
        プロセス: "image/resize,w_300",
      });
      console.log("signUrl=" + signUrl);
    </script>
  </body>
</html>