Browser.js SDK を使用したイメージの処理 - Object Storage Service

イメージ処理は、Object Storage Service (OSS) が提供する、スケーラブルで安全、コスト効率が高く、信頼性の高いサービスです。イメージを OSS にアップロードすると、シンプルな RESTful インターフェイスを使用して、インターネットに接続された任意のデバイスでイメージを処理できます。

注意事項

Webpack や Browserify などのパッケージングツールを使用する場合は、npm install ali-oss コマンドを実行して Browser.js SDK をインストールします。
ブラウザから OSS バケットにアクセスする際に、そのバケットに CORS ルールが設定されていない場合、ブラウザはリクエストを拒否します。そのため、ブラウザからバケットにアクセスするには、バケットに CORS ルールを設定する必要があります。詳細については、「インストール」をご参照ください。
ほとんどの場合、Browser.js SDK はブラウザで使用されます。AccessKey ペアの漏洩を防ぐため、セキュリティトークンサービス (STS) から取得した一時的なアクセス認証情報を使用して OSS にアクセスすることを推奨します。
一時的なアクセス認証情報は、AccessKey ペアとセキュリティトークンで構成されます。AccessKey ペアは、AccessKey ID と AccessKey Secret で構成されます。一時的なアクセス認証情報を取得する方法の詳細については、「STS を使用した一時的なアクセス権限付与」をご参照ください。

イメージ処理パラメーターを使用したイメージの処理

単一のイメージ処理パラメーターを使用したイメージの処理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--SDK ファイルをインポートします。-->
    <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,
        // STS サービスから一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) を取得します。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS サービスからセキュリティトークン (SecurityToken) を取得します。
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // ご利用の STS サービスから一時的なアクセス認証情報を取得します。
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス認証情報を更新する間隔。単位：ミリ秒。
        refreshSTSTokenInterval: 300000,
        // バケット名を指定します。例：examplebucket。
        bucket: "examplebucket",
        // yourRegion をバケットが所在するリージョンに置き換えます。たとえば、バケットが中国 (杭州) リージョンにある場合は、リージョンを oss-cn-hangzhou に設定します。
        region: "yourRegion",
      });

      // イメージを幅と高さが 100 px の固定サイズに変更します。
      async function scale() {
        try {
          // オブジェクトの完全なパスを指定します。例：exampledir/exampleobject.jpg。完全なパスにバケット名を含めることはできません。
          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>

複数のイメージ処理パラメーターを使用したイメージの処理

複数のイメージ処理パラメーターを使用するには、スラッシュ (/) で区切ります。

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--SDK ファイルをインポートします。-->
    <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,
        // STS サービスから一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) を取得します。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS サービスからセキュリティトークン (SecurityToken) を取得します。
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // ご利用の STS サービスから一時的なアクセス認証情報を取得します。
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス認証情報を更新する間隔。単位：ミリ秒。
        refreshSTSTokenInterval: 300000,
        // バケット名を指定します。例：examplebucket。
        bucket: "examplebucket",
        // yourRegion をバケットが所在するリージョンに置き換えます。たとえば、バケットが中国 (杭州) リージョンにある場合は、リージョンを oss-cn-hangzhou に設定します。
        region: "oss-cn-hangzhou",
      });

      // イメージを幅と高さが 100 px の固定サイズに変更し、90 度回転させます。
      async function resize() {
        try {
          // オブジェクトの完全なパスを指定します。例：exampledir/exampleobject.jpg。完全なパスにバケット名を含めることはできません。
          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>

イメージスタイルを使用したイメージの処理

イメージスタイルを作成します。
スタイルに複数のイメージ処理パラメーターを追加して、複雑なイメージ処理操作を実行できます。詳細については、「イメージスタイル」をご参照ください。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--SDK ファイルをインポートします。-->
    <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,
        // STS サービスから一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) を取得します。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS サービスからセキュリティトークン (SecurityToken) を取得します。
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // ご利用の STS サービスから一時的なアクセス認証情報を取得します。
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス認証情報を更新する間隔。単位：ミリ秒。
        refreshSTSTokenInterval: 300000,
        // バケット名を指定します。例：examplebucket。
        bucket: "examplebucket",
        // yourRegion をバケットが所在するリージョンに置き換えます。たとえば、バケットが中国 (杭州) リージョンにある場合は、リージョンを oss-cn-hangzhou に設定します。
        region: "oss-cn-hangzhou",
      });

      // イメージを幅と高さが 100 px の固定サイズに変更し、90 度回転させます。
      async function style() {
        try {
          // オブジェクトの完全なパスを指定します。例：exampledir/exampleobject.jpg。完全なパスにバケット名を含めることはできません。
          const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
            expires: 3600,
            // yourCustomStyleName をステップ 1 で作成したイメージスタイルの名前に置き換えます。
            process: "style/yourCustomStyleName",
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

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

イメージ処理の永続化

デフォルトでは、イメージ処理サービスは処理後のイメージを保存しません。イメージ処理の永続化機能を使用すると、処理後のイメージをソースイメージと同じバケットに保存できます。

次のコードは、イメージ処理の永続化の使用例です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--SDK ファイルをインポートします。-->
    <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,
        // STS サービスから一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) を取得します。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS サービスからセキュリティトークン (SecurityToken) を取得します。
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // ご利用の STS サービスから一時的なアクセス認証情報を取得します。
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス認証情報を更新する間隔。単位：ミリ秒。
        refreshSTSTokenInterval: 300000,
        // バケット名を指定します。例：examplebucket。
        bucket: "examplebucket",
        // yourRegion をバケットが所在するリージョンに置き換えます。たとえば、バケットが中国 (杭州) リージョンにある場合は、リージョンを oss-cn-hangzhou に設定します。
        region: "oss-cn-hangzhou",
      });

      // ソースオブジェクトの完全なパスを指定します。例：exampledir/src.png。完全なパスにバケット名を含めることはできません。
      const sourceImage = "exampledir/src.png";
      // 処理されたイメージの宛先オブジェクトの完全なパスを指定します。例：exampledir/dest.png。完全なパスにバケット名を含めることはできません。
      const targetImage = "exampledir/dest.png";
      async function processImage(processStr, targetBucket) {
        const result = await client.processObjectSave(
          sourceImage,
          targetImage,
          processStr,
          targetBucket
        );
        console.log(result.res.status);
      }

      // ソースイメージを幅と高さが 100 px の固定サイズに変更し、ソースバケットに保存します。
      processImage("image/resize,m_fixed,w_100,h_100", "examplebucket");
    </script>
  </body>
</html>

イメージ処理パラメーターを含むファイルの署名付き URL の生成

非公開ファイルに URL を使用してアクセスする場合、署名が必要です。署名付き URL にイメージ処理パラメーターを直接追加することはできません。非公開イメージを処理するには、署名にイメージ処理パラメーターを追加する必要があります。次のコードは、その例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--SDK ファイルをインポートします。-->
    <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,
        // STS サービスから一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) を取得します。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS サービスからセキュリティトークン (SecurityToken) を取得します。
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // ご利用の STS サービスから一時的なアクセス認証情報を取得します。
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // 一時的なアクセス認証情報を更新する間隔。単位：ミリ秒。
        refreshSTSTokenInterval: 300000,
        // バケット名を指定します。例：examplebucket。
        bucket: "examplebucket",
        // yourRegion をバケットが所在するリージョンに置き換えます。たとえば、バケットが中国 (杭州) リージョンにある場合は、リージョンを oss-cn-hangzhou に設定します。
        region: "oss-cn-hangzhou",
      });

      // イメージ処理パラメーターを含むファイルの署名付き URL を生成し、署名付き URL の有効期間を 600 秒に設定します。最大有効期間は 32400 秒です。
      const signUrl = client.signatureUrl("oss.png", {
        expires: 600,
        process: "image/resize,w_300",
      });
      console.log("signUrl=" + signUrl);
    </script>
  </body>
</html>