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")