ドキュメントセンター
edit-icon download-icon

画像処理

最終更新日: Nov 07, 2017

Alibaba Cloud OSS は、非常に大きな処理能力、高度なセキュリティ、低いコスト、高い信頼性を誇る、画像処理サービスを提供します。

ソース画像を OSS にアップロードして保存しておくことで、いつでもどこでも、あらゆるインターネットデバイスから、シンプルな RESTful インターフェイスを使用して画像を処理できます。

画像処理サービスでは、画像処理インターフェイスが利用できます。画像のアップロードは、OSS のアップロードインターフェイスを使用してください。OSS の画像処理をベースにして独自の画像処理サービスを構築できます。

画像処理の基本機能

OSS 画像処理は、次の機能を備えています。

画像処理の使用方法

画像処理では、アクセスに標準の HTTP GET 要求を使用します。すべての処理パラメーターは、URL 内で QueyString でエンコードされます。

匿名アクセス

次の表に示されているように、画像オブジェクトのアクセス権限が公開読み取りである場合、匿名で画像処理にアクセスできます。

バケットの権限 オブジェクトの権限
公開読み取りまたは
公開読み書き
 デフォルト
すべての権限 公開読み取りまたは
公開読み書き

  • 次の形式でサードレベルドメインを使用して匿名で画像処理にアクセスします。

    1.   http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value

    • Bucket: ユーザーのバケットの名前

    • Endpoint: ユーザーのバケットのデータセンターに必要なアクセスドメイン名

    • Object: OSS にアップロードされた画像オブジェクト

    • Image: 画像処理で予約されている識別子

    • Action: 画像に対する操作 (拡大縮小、トリミング、回転など)

    • Parame: 画像に対する操作に対応するパラメーター

      例: 

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

  • カスタムスタイル。次の形式でサードレベルドメインを使用して匿名で画像処理にアクセスします。

    1.   http://bucket.<endpoint>/object?x-oss-process=x-oss-process=style/name
    • Style: ユーザーのカスタムスタイル用にシステムによって予約された識別子

    • Name: カスタムスタイルの名前、つまりコンソール定義スタイルのルール名

      例:

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

  • イメージサービスのアクセスルールを使用すると、イメージに複数の操作を実装できます。形式は次のとおりです。

    1.   http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value/action,parame_value/...

    例:

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

  • 画像処理は HTTPS アクセスにも対応しています。

    例:

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

権限付与済みアクセス

次の表に示されているように、非公開権限のオブジェクトの場合、画像処理にアクセスするには権限が付与されている必要があります。

バケットの権限 オブジェクトの権限
非公開 デフォルト
すべての権限 非公開

署名を使って生成された画像処理の URL コードは次のとおりです。

  1. var OSS = require('ali-oss');
  3. var client = new OSS({
  4.   accessKeyId: '<accessKeyId>',
  5.   accessKeySecret: '<accessKeySecret>',
  6.   bucket: '<bucketName>',
  7.   Endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  8. });
  10. // Expired for 10 minutes. The image processing style is: "image/resize,w_300". 
  11. var signUrl = client.signatureUrl('example.jpg', {expires: 600, 'process' : 'image/resize,w_300'});
  12. console.log("signUrl="+signUrl);

注意:

  • 権限付与済みアクセスは、カスタムスタイル、HTTPS、およびカスケード処理に対応しています。

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

SDK アクセス

直接 SDK を使用して、任意の権限の画像オブジェクトにアクセスして処理できます。

注意: SDK による画像オブジェクトの処理は、カスタムスタイル、HTTPS、およびイメージサービスのアクセスルール.に対応しています。

基本操作

画像処理の基本操作には、ドミナントトーンの取得、形式の変換、イメージのサイズ変更、内接円、向きの調整、輝度、およびウォーターマークの追加があります。

  1. var OSS = require('ali-oss');
  2. var co = require('co');
  4. var client = new OSS({
  5.   accessKeyId: '<accessKeyId>',
  6.   accessKeySecret: '<accessKeySecret>',
  7.   bucket: '<bucketName>',
  8.   Endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  9. });
  11. // Scale
  12. co(function* () {
  13.   var result = yield client.get('example.jpg', './example-resize.jpg', 
  14.                                 {process: 'image/resize,m_fixed,w_100,h_100'});
  15. }).catch(function (err) {
  16.   console.log(err);
  17. });
  19. // Crop
  20. co(function* () {
  21.   var result = yield client.get('example.jpg', './example-crop.jpg', 
  22.                                 {process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
  23. }).catch(function (err) {
  24.   console.log(err);
  25. });
  27. // Rotate
  28. co(function* () {
  29.   var result = yield client.get('example.jpg', './example-rotate.jpg', 
  30.                                 {process: 'image/rotate,90'});
  31. }).catch(function (err) {
  32.   console.log(err);
  33. });
  35. // Sharpen
  36. co(function* () {
  37.   var result = yield client.get('example.jpg', './example-sharpen.jpg', 
  38.                                 {process: 'image/sharpen,100'});
  39. }).catch(function (err) {
  40.   console.log(err);
  41. });
  43. // Watermark
  44. co(function* () {
  45.   var result = yield client.get('example.jpg', './example-watermark.jpg', 
  46.                                 {process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  47. }).catch(function (err) {
  48.   console.log(err);
  49. });
  51. // Format conversion
  52. co(function* () {
  53.   var result = yield client.get('example.jpg', './example-format.jpg', 
  54.                                 {process: 'image/format,png'});
  55. }).catch(function (err) {
  56.   console.log(err);
  57. });
  59. // Image information
  60. co(function* () {
  61.   var result = yield client.get('example.jpg', './example-info.txt', 
  62.                                 {process: 'image/info'});
  63. }).catch(function (err) {
  64.   console.log(err);
  65. });

カスタムスタイル

注意: カスタムスタイルを使用する前に、OSS コンソールに移動して、カスタムスタイル example-sytle を追加してください。

  1. var OSS = require('ali-oss');
  2. var co = require('co');
  4. var client = new OSS({
  5.   accessKeyId: '<accessKeyId>',
  6.   accessKeySecret: '<accessKeySecret>',
  7.   bucket: '<bucketName>',
  8.   Endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  9. });
  11. // Custom styles
  12. co(function* () {
  13.   var result = yield client.get('example.jpg', './example-custom-style.jpg', 
  14.                                 {process: 'style/example-sytle"'});
  15. }).catch(function (err) {
  16.   console.log(err);
  17. });

カスケード処理

  1. var OSS = require('ali-oss');
  2. var co = require('co');
  4. var client = new OSS({
  5.   accessKeyId: '<accessKeyId>',
  6.   accessKeySecret: '<accessKeySecret>',
  7.   bucket: '<bucketName>',
  8.   Endpoint: '<endpoint, such as http://oss-cn-hangzhou.aliyuncs.com>'
  9. });
  11. // Cascading processing
  12. co(function* () {
  13.   var result = yield client.get('example.jpg', './example-cascade.jpg', 
  14.                                 {process: 'image/resize,m_fixed,w_100,h_100/rotate,90'});
  15. }).catch(function (err) {
  16.   console.log(err);
  17. });

画像処理ツール

  • 可視化された画像処理ツール ImageStyleViever を使用すると、OSS の画像処理の結果をわかりやすく表示できます。

  • OSS 画像処理機能および使用方法のデモンストレーションページに移動するには、ここをクリックしてください。

アカウント登録 コンソール