すべてのプロダクト
Search

このプロダクト

    Object Storage Service:IMG

    ドキュメントセンター

    Object Storage Service:IMG

    最終更新日:Nov 08, 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({
  // 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",
  // Obtain access credentials from environment variables. Before you run the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured. 
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // Specify the name of the bucket. 
  bucket: "examplebucket",
});
// Set the validity period of the URL to 10 minutes and the image style to image/resize,w_300. 
const signUrl = client.signatureUrl("example.png", {
  expires: 600,
  process: "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({
  // 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',
  // Obtain access credentials from environment variables. Before you run the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured. 
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // Specify the name of the bucket. 
  bucket: 'yourbucketname'
});

// Resize the image to 100 × 100 pixels. 
async function 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()

// Crop the image to 100 × 100 pixels starting from the position specified by coordinate pair (100, 100). 
async function 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()

// Rotate the image 90 degrees. 
async function rotate() {
  try {
    const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}

rotate()

// Sharpen the image. Set the parameter to 100. 
async function sharpen() {
  try {
    const result = await client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'});
  } catch (e) {
    console.log(e);
  }
}

sharpen()

// Add watermarks to the image. 
async function watermark() {
  try {
    const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  } catch (e) {
    console.log(e);
  }
}

watermark()

// Convert the format of the image. 
async function format() {
  try {
    const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  } catch (e) {
    console.log(e);
  }
}

format()

// Obtain the image information. 
async function 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({
  // 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',
  // Obtain access credentials from environment variables. Before you run the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured. 
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // Specify the name of the bucket. 
  bucket: 'yourbucketname'
});

// Resize the image to 100 × 100 pixels. 
async function 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()

// Crop the image to 100 x 100 pixels starting from the position specified by the coordinate pair (100, 100). 
async function 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()

// Rotate the image 90 degrees. 
async function rotate() {
  try {
    const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}

rotate()

// Sharpen the image. Set the parameter to 100. 
async function sharpen() {
  try {
    const result = await client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'});
  } catch (e) {
    console.log(e);
  }
}

sharpen()

// Add watermarks to the image. 
async function watermark() {
  try {
    const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  } catch (e) {
    console.log(e);
  }
}

watermark()

// Convert the format of the image. 
async function format() {
  try {
    const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  } catch (e) {
    console.log(e);
  }
}

format()

// Obtain the image information. 
async function 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({
  // 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',
  // Obtain access credentials from environment variables. Before you run the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured. 
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // Specify the name of the bucket. 
  bucket: 'yourbucketname'
});

// Perform cascade processing.
async function 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);
  }
}
cascade();

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

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

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

const client = new OSS({
  // 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',
  // Obtain access credentials from environment variables. Before you run the sample code, make sure that the OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET environment variables are configured. 
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // Specify the name of the bucket. 
  bucket: 'yourbucketname'
});

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

// Resize the image and configure the destination bucket that is used to save the processed image. 
processImage("image/resize,m_fixed,w_100,h_100", "target bucket")

// Crop the image and configure the destination bucket that is used to save the processed image. 
processImage("image/crop,w_100,h_100,x_100,y_100,r_1", "target bucket")

// Rotate the image and configure the destination bucket that is used to save the processed image. 
processImage("image/rotate,90", "target bucket")

// Sharpen the image and configure the destination bucket that is used to save the processed image. 
processImage("image/sharpen,100", "target bucket")

// Add watermarks to the image and configure the destination bucket that is used to save the processed image. 
processImage("image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ", "target bucket")

// Convert the format of the image and configure the destination bucket that is used to save the processed image. 
processImage("image/format,jpg", "target bucket")

// Convert the format of the image and configure the destination bucket that is used to save the processed image. 
processImage("image/format,jpg", "target bucket")

    関連ドキュメント

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

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