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

Object Storage Service:IMG

最終更新日:Feb 22, 2024

Image Processing (IMG) は、大量のデータを処理するのに役立つObject Storage service (OSS) が提供する、安全で費用対効果の高い信頼性の高い画像処理サービスです。 ソース画像をOSSにアップロードした後、RESTful APIを呼び出して、いつでもどこでもインターネットに接続されているデバイスで画像を処理できます。

IMGの使用法

標準のHTTP GETリクエストを使用してIMGにアクセスできます。 URLのクエリ文字列でIMGパラメーターを設定できます。

イメージオブジェクトのアクセス制御リスト (ACL) が非公開の場合、許可されたユーザーのみがイメージにアクセスできます。

  • 匿名アクセス

    次の表に示すように、イメージオブジェクトのACLがpublic-readの場合、匿名ユーザーはイメージオブジェクトにアクセスできます。

    バケットACL

    オブジェクトACL

    Public-readまたはpublic-read-write

    デフォルト

    プライベート、public-read、またはpublic-read-write

    Public-readまたはpublic-read-write

    次の形式のサブドメインを使用して、処理された画像に匿名でアクセスできます。

    http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=image/<yourAction >,< yourParamValue>

    パラメーター

    説明

    yourBucketName

    バケットの名前です。

    yourEndpoint

    バケットが配置されているリージョンのエンドポイント。

    yourObjectName

    イメージオブジェクトの名前。

    イメージ

    IMGによって予約された識別子。

    yourAction

    サイズ変更、トリミング、回転など、画像に対して実行される操作。

    yourParamValue

    画像に対して実行される操作のパラメーター。

    • 基本操作

      たとえば、次のURLを使用して、画像のサイズを100ピクセルの幅に変更し、比率に基づいて高さを調整できます。

      http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100
    • カスタム画像スタイル

      次の形式のサブドメインを使用して、匿名でIMGにアクセスできます。

      http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=style/<yourStyleName>
      • style: カスタムイメージスタイル用にIMGによって予約された識別子。

      • yourStyleName: カスタムイメージスタイルの名前。 OSSコンソールでカスタムイメージスタイルを作成するときに、Rule nameパラメーターで名前を指定します。

      例:

      http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100
    • カスケード処理

      カスケード処理を使用すると、次の形式のURLを使用して、画像に対して複数の操作を順番に実行できます。

      http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=image/<yourAction1 >,< yourParamValue1>/<yourAction2 >,< yourParamValue2>/...

      例:

      http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90
    • HTTPS経由のアクセス

      IMGはHTTPS経由のアクセスをサポートしています。 例:

      https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100
  • アクセス許可

    イメージオブジェクトのACLが非公開の場合、イメージオブジェクトに対する操作を実行する前に、イメージオブジェクトに対する権限が必要です。

    バケットACL

    オブジェクトACL

    プライベート

    デフォルト

    プライベート、public-read、またはpublic-read-write

    プライベート

    次のコードは、IMGの署名付きURLを生成する方法の例を示しています。

    const OSS = require("ali-oss");
    
    const client = new OSS({
      // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
      リージョン: "oss-cn-hangzhou" 、
      // 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID、
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET、
      // バケットの名前を指定します。 
      bucket: "examplebucket" 、});
    // URLの有効期間を10分に、画像スタイルをimage/resize、w_300に設定します。 
    const signUrl = client.signatureUrl("example.png", {
      有効期限: 600、
      プロセス: "image/resize,w_300",
    });
    console.log("signUrl=" + signUrl); 
    説明
    • 承認されたアクセスは、カスタム画像スタイル、HTTPS、およびカスケード処理をサポートします。

    • 有効期間 (有効期限) は秒単位で測定されます。

  • OSS SDKを使用したイメージへのアクセス

    OSS SDKを使用して、イメージオブジェクトにアクセスして処理することができます。

    OSS SDKを使用すると、カスタムイメージスタイルの指定、HTTPS経由のイメージへのアクセス、カスケード処理の実行が可能です。

    • 基本操作

      次のコードでは、イメージオブジェクトに対して基本的な操作を実行する方法の例を示します。

      const OSS = require('ali-OSS ');
      
      const client = new OSS({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: 'yourregion' 、
        // 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。 
        accessKeyId: process.env.OSS_ACCESS_KEY_ID、
        accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET、
        // バケットの名前を指定します。 
        bucket: 'yourbucketname'
      });
      
      // 画像のサイズを100 × 100ピクセルに変更します。 
      async関数scale() {
        try {
          const result = await client.get('example.jpg ', './example-resize.jpg ', { process: 'image/resize,m_fixed,w_100,h_100'});
        } catch (e) {
          console.log(e);
        }
      }
      
      scale()
      
      // 座標ペアで指定された位置から100 × 100ピクセルに画像をトリミングします (100、100) 。 
      async関数cut() {
        try {
           const result = await client.get('example.jpg ', './example-crop.jpg ', { process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
        } catch (e) {
          console.log(e)
        }
      }
      
      cut()
      
      // 画像を90度回転させます。 
      async関数rotate() {
        try {
          const result = await client.get('example.jpg ', './example-rotate.jpg ', { process: 'image/rotate,90'});
        } catch (e) {
          console.log(e);
        }
      }
      
      rotate()
      
      // イメージをシャープにします。 パラメーターを100に設定します。 
      async関数sharpen() {
        try {
          const result = await client.get('example.jpg ', './example-sharpen.jpg ', { process: 'image/sharpen,100'});
        } catch (e) {
          console.log(e);
        }
      }
      
      sharpen()
      
      // 画像に透かしを追加します。 
      async関数watermark() {
        try {
          const result = await client.get('example.jpg ', './example-watermark.jpg ', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
        } catch (e) {
          console.log(e);
        }
      }
      
      watermark()
      
      // 画像のフォーマットを変換します。 
      async関数の形式 () {
        try {
          const result = await client.get('example.jpg ', './example-format.jpg ', { process: 'image/format,png'});
        } catch (e) {
          console.log(e);
        }
      }
      
      format()
      
      // イメージ情報を取得します。 
      async関数info() {
        try {
          const result = await client.get('example.jpg ', './example-info.txt ', {process: 'image/info'});
        } catch (e) {
          console.log(e);
        }
      }
      
      info() 
    • カスタム画像スタイル

      説明

      OSSコンソールにログインして、example-styleという名前のカスタムイメージスタイルを作成する必要があります。

      次のコードは、カスタムイメージスタイルを指定する方法の例を示しています。

      const OSS = require('ali-OSS ');
      
      const client = new OSS({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: 'yourregion' 、
        // 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。 
        accessKeyId: process.env.OSS_ACCESS_KEY_ID、
        accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET、
        // バケットの名前を指定します。 
        bucket: 'yourbucketname'
      });
      
      // 画像のサイズを100 × 100ピクセルに変更します。 
      async関数scale() {
        try {
          const result = await client.get('example.jpg ', './example-resize.jpg ', { process: 'image/resize,m_fixed,w_100,h_100'});
        } catch (e) {
          console.log(e);
        }
      }
      
      scale()
      
      // 座標ペア (100、100) で指定された位置から100x100ピクセルに画像をトリミングします。 
      async関数cut() {
        try {
           const result = await client.get('example.jpg ', './example-crop.jpg ', { process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
        } catch (e) {
          console.log(e)
        }
      }
      
      cut()
      
      // 画像を90度回転させます。 
      async関数rotate() {
        try {
          const result = await client.get('example.jpg ', './example-rotate.jpg ', { process: 'image/rotate,90'});
        } catch (e) {
          console.log(e);
        }
      }
      
      rotate()
      
      // イメージをシャープにします。 パラメーターを100に設定します。 
      async関数sharpen() {
        try {
          const result = await client.get('example.jpg ', './example-sharpen.jpg ', { process: 'image/sharpen,100'});
        } catch (e) {
          console.log(e);
        }
      }
      
      sharpen()
      
      // 画像に透かしを追加します。 
      async関数watermark() {
        try {
          const result = await client.get('example.jpg ', './example-watermark.jpg ', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
        } catch (e) {
          console.log(e);
        }
      }
      
      watermark()
      
      // 画像のフォーマットを変換します。 
      async関数の形式 () {
        try {
          const result = await client.get('example.jpg ', './example-format.jpg ', { process: 'image/format,png'});
        } catch (e) {
          console.log(e);
        }
      }
      
      format()
      
      // イメージ情報を取得します。 
      async関数info() {
        try {
          const result = await client.get('example.jpg ', './example-info.txt ', {process: 'image/info'});
        } catch (e) {
          console.log(e);
        }
      }
      
      info() 
    • カスケード処理

      次のコードは、イメージに対してカスケード処理を実行する方法の例を示しています。

      const OSS = require('ali-OSS ');
      
      const client = new OSS({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: 'yourregion' 、
        // 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。 
        accessKeyId: process.env.OSS_ACCESS_KEY_ID、
        accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET、
        // バケットの名前を指定します。 
        bucket: 'yourbucketname'
      });
      
      // カスケード処理を実行します。
      async関数cascade () {
        try {
          const result = await client.get('example.jpg ', './example-cascade.jpg ', {process: 'image/resize,m_fixed,w_100,h_100/rotate,90'});
        } catch (e) {
          console.log(e);
        }
      }
      カスケード (); 

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

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

const OSS = require('ali-OSS ');

const client = new OSS({
  // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
  region: 'yourregion' 、
  // 環境変数からアクセス資格情報を取得します。 サンプルコードを実行する前に、OSS_ACCESS_KEY_IDおよびOSS_ACCESS_KEY_SECRET環境変数が設定されていることを確認してください。 
  accessKeyId: process.env.OSS_ACCESS_KEY_ID、
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET、
  // バケットの名前を指定します。 
  bucket: 'yourbucketname'
});

const sourceImage = 'sourceObject.png ';
const targetImage = 'targetObject.jpg ';
async関数processImage(processStr, targetBucket) {
  const result = await client.processObjectSave ()
    sourceImage,
    targetImage,
    processStr,
    targetBucket
  );
  console.log(result.res.status);
}

// イメージのサイズを変更し、処理済みイメージの保存に使用する宛先バケットを設定します。 
processImage("image/resize,m_fixed,w_100,h_100", "target bucket")

// イメージをクロップし、処理されたイメージを保存するために使用される宛先バケットを設定します。 
processImage("image/crop,w_100,h_100,x_100,y_100,r_1", "target bucket")

// イメージを回転させ、処理されたイメージを保存するために使用される宛先バケットを設定します。 
processImage("image/rotate,90", "target bucket")

// イメージをシャープにし、処理されたイメージを保存するために使用される宛先バケットを設定します。 
processImage("image/sharpen,100", "target bucket")

// 画像に透かしを追加し、処理された画像を保存するために使用される宛先バケットを設定します。 
processImage("image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ", "target bucket")

// イメージの形式を変換し、処理されたイメージを保存するために使用される宛先バケットを設定します。 
processImage("image/format,jpg", "target bucket")

// イメージの形式を変換し、処理されたイメージを保存するために使用される宛先バケットを設定します。 
processImage("image/format,jpg", "target bucket") 

参考資料

  • サポートされているIMGパラメーターの詳細については、「IMGパラメーター」をご参照ください。

  • IMG操作の実行に使用される完全なサンプルコードについては、『GitHub』をご参照ください。