すべてのプロダクト
Search

このプロダクト

    Object Storage Service:画像処理 (Node.js SDK)

    ドキュメントセンター

    Object Storage Service:画像処理 (Node.js SDK)

    最終更新日:Nov 30, 2025

    画像処理は、OSS が提供する安全、低コスト、高信頼性のサービスです。画像を OSS にアップロードした後、シンプルな RESTful インターフェイスを使用して、インターネットに接続された任意のデバイスで画像を処理できます。

    画像処理の使用方法

    画像処理では、標準の HTTP GET リクエストを使用します。URL のクエリ文字列で処理パラメーターを設定できます。

    画像ファイルが非公開の場合、アクセスには権限付与が必要です。

    • 匿名アクセス

      画像ファイル (オブジェクト) に public-read (公開読み取り) のアクセス権限がある場合、画像サービスに匿名でアクセスできます。

      バケット権限

      オブジェクト権限

      public-read または public-read-write

      デフォルト

      任意の権限

      public-read または public-read-write

      処理後の画像に匿名でアクセスするには、次のフォーマットの第 3 レベルドメインを使用します：

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

      パラメーター

      説明

      yourBucketName

      バケット名。

      yourEndpoint

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

      yourObjectName

      画像ファイル名。

      image

      画像処理の予約フラグ。

      yourAction

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

      yourParamValue

      操作のパラメーター。

      • 基本操作

        たとえば、画像の幅を 100 ピクセルにサイズ変更し、高さを比例的に調整する場合：

        http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

      • カスタムスタイル

        次のフォーマットの第 3 レベルドメインを使用して、画像処理に匿名でアクセスできます：

        http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=style/<yourStyleName>

        • style：カスタムスタイルの予約フラグ。

        • yourStyleName：カスタムスタイルの名前。これは、コンソールで設定したルール名です。

        例：

        http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100

      • カスケード処理

        カスケード処理では、画像に対して複数の操作を順番に実行できます。フォーマットは次のとおりです：

        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 アクセス

        画像サービスは HTTPS アクセスをサポートしています。例：

        https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

    • 権限付与アクセス

      非公開ファイル (オブジェクト) の場合、画像サービスにアクセスするには権限付与を使用する必要があります。

      バケット権限

      オブジェクト権限

      非公開

      デフォルト

      任意の権限

      非公開

      次のコードは、画像処理用の署名付き URL を生成する方法を示しています：

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

const client = new OSS({
  // バケットが配置されているリージョンに設定します。たとえば、中国 (杭州) の場合は、リージョンを oss-cn-hangzhou に設定します。
  region: "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,
  authorizationV4: true,
  // バケットをご利用のバケット名に設定します。
  bucket: "examplebucket",
});
// 有効期限は 10 分です。画像処理スタイルは "image/resize,w_300" です。
const signUrl = client.signatureUrl("example.png", {
  expires: 600,
  process: "image/resize,w_300",
});
console.log("signUrl=" + signUrl);
      説明

      • 権限付与アクセスは、カスタムスタイル、HTTPS、およびカスケード処理をサポートしています。

      • expires パラメーターは秒単位で指定します。

    • SDK アクセス

      ソフトウェア開発キット (SDK) を使用すると、権限に関係なく画像ファイルに直接アクセスして処理できます。

      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,
  authorizationV4: true,
  // バケットをご利用のバケット名に設定します。
  bucket: 'yourbucketname'
});

// 画像を幅 100 px、高さ 100 px の固定サイズに変更します。
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()

// 座標 (100, 100) から開始して、画像を幅 100 px、高さ 100 px にトリミングします。
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()

// 画像を 90 度回転させます。
async function rotate() {
  try {
    const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}

rotate()

// シャープ化パラメーター 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()

// 画像にウォーターマークを追加します。
async function watermark() {
  try {
    const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8gQWxpYmFiYSBDbG91ZCE='});
  } catch (e) {
    console.log(e);
  }
}

watermark()

// 画像フォーマットを変換します。
async function format() {
  try {
    const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  } catch (e) {
    console.log(e);
  }
}

format()

// 画像情報を取得します。
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({
  // バケットが配置されているリージョンに yourregion を設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、Region を 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,
  authorizationV4: true,
  // yourbucketname をバケット名に設定します。
  bucket: 'yourbucketname'
});

// 画像を幅 100 ピクセル、高さ 100 ピクセルの固定サイズに変更します。
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()

// 座標 (100, 100) から開始して、画像を幅 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()

// 画像を 90 度回転させます。
async function rotate() {
  try {
    const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}

rotate()

// 画像をシャープ化します。シャープ化パラメーターは 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()

// 画像にウォーターマークを追加します。
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()

// 画像フォーマットを変換します。
async function format() {
  try {
    const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  } catch (e) {
    console.log(e);
  }
}

format()

// 画像情報を取得します。
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({
  // バケットが配置されているリージョンに設定します。たとえば、中国 (杭州) の場合は、リージョンを 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,
  authorizationV4: true,
  // バケットをご利用のバケット名に設定します。
  bucket: 'yourbucketname'
});

// カスケード処理
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({
  // バケットが配置されているリージョンに設定します。たとえば、中国 (杭州) の場合は、リージョンを 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,
  authorizationV4: true,
  // バケットをご利用のバケット名に設定します。
  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);
}

// 処理結果の保存：画像をサイズ変更し、結果を保存するターゲットバケットを設定します。
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_SGVsbG8gQWxpYmFiYSBDbG91ZCE=", "target bucket")

// 処理結果の保存：画像フォーマットを変換し、結果を保存するターゲットバケットを設定します。
processImage("image/format,jpg", "target bucket")

    関連ドキュメント

    • 画像処理のパラメーターの詳細については、「画像処理」をご参照ください。

    • イメージ処理の完全なサンプルコードについては、「GitHub のサンプル」をご参照ください。