[AlibabaCloud]OSS内の画像に対してURLだけで画像処理してみる

Pocket

はじめに

AlibabaCloud ACP 認定取得のためにAlibaba Cloudを触り始めたのですが、
その中でクラウドストレージサービスであるObject Storage Service(OSS)に画像処理機能があると知り、中々面白い機能だったので紹介したいと思います。

Alibaba Cloud OSS Image Processing (IMG)

今回利用する機能はImage Processing (IMG)と呼ばれています。特に設定などをする必要はなくOSSを利用していれば誰でも利用できます。

IMGを使いたい場合、URLにクエリパラメータを追加するだけで利用できます。

アクセスルール

IMGを利用する場合、画像取得用URLにクエリパラメータx-oss-processを追加する必要があります。

http://bucket.endpoint/hogehoge.jpg?x-oss-process=image/action,parame_value

  • パラメータには必ずprefixにimage/が必要です。
  • actionで画像処理の操作を定義します。
  • parame_valueはactionに対するパラメータを記述します。一つのactionに対して複数のパラメータを記述できます。
  • 一つの操作に対するパラメータはカンマ区切りで記述します。
  • スラッシュ区切りで複数のactionを定義できます。

画像処理サンプル

実際にIMGを使って画像処理してみます。今回は元画像として以下の画像を使います。

令和初記事ということで元号を掲げる人(令和)を使わせて頂きます。
(バケット上の画像はこちらからアクセスできます。)

今回は一部の操作のみ紹介しますが、他の機能が気になる方は公式ドキュメントを参考にしてください。

リサイズ

画像サイズを元画像の50%にリサイズしてみます。URLは以下のようになります。

https://menom-dev.oss-ap-northeast-1.aliyuncs.com/image/reiwa.jpg?x-oss-process=image/resize,p_50

  • action: resize
  • parame_value: p_50
    • pはパーセンテージ,50は倍率を意味しています。

トリミング

トリミングの機能の一つであるcircleを使って画像を円形にトリミングしてみます。
今回はjpgを扱っているので円の外側は白で塗りつぶされます。png形式などであれば透明領域になります。

https://menom-dev.oss-ap-northeast-1.aliyuncs.com/image/reiwa.jpg?x-oss-process=image/circle,r_100

  • action: circle
  • parame_value: r_100
    • 100はイメージの円形領域の半径(px)を意味しています。

透かし機能

透かし機能をつかってテキストを追加してみます。

https://menom-dev.oss-ap-northeast-1.aliyuncs.com/image/reiwa.jpg?x-oss-process=image/watermark,text_5YWD5Y-344KS5o6y44GS44KL5Lq6KOS7pOWSjCk,color_0801f9,size_30,g_se

  • action: watermark
  • parame_value: text_5YWD5Y-344KS5o6y44GS44KL5Lq6KOS7pOWSjCk
    • textパラメータは表示する文字列を定義します。文字列はURLセーフのbase64エンコードが必要です。
  • parame_value: color_0801f9
    • 文字色を定義します。
  • parame_value: size_30
    • フォントサイズを定義します。
  • parame_value: g_se
    • gは透かしの基準点を定義するパラメータです。sesouth eastの略で画像の右下を基準店とし、透かしを追加します。

複数組み合わせ

actionは複数組み合わせが可能なので、それを利用して先程のトリミング処理の円外の領域が透明になるようにしてみます。

今回ではトリミング処理の前に画像形式をpngに変換する処理を追加しています。

https://menom-dev.oss-ap-northeast-1.aliyuncs.com/image/reiwa.jpg?x-oss-process=image/format,png/circle,r_100

イメージスタイル

複数のactionを定義することでより複雑な画像処理も記述できますが、クエリパラメータが長くなってしまい、管理が難しくなります。

それを回避するためにIMGではクエリパラメータの定義をエイリアスとして保存できるイメージスタイルという機能があります。

アクセスルール

イメージスタイルを利用する場合以下のようなクエリパラメータを追加します。

http://bucket.endpoint/hogehoge.jpg?**x-oss-process=style/styleName

  • パラメータには必ずprefixにstyle/が必要です。
  • styleNameに定義したイメージスタイル名を記述します。
  • イメージスタイルは各バケット毎に定義でき、そのバケット内でのみ利用可能です。

イメージスタイルの作成

Alibaba Cloudのコンソール上からイメージスタイルの作成・変更・削除ができます。

  1. OSSのバケットコンソールを開き「イメージ処理」を選択します。
  2. 「スタイル作成」を選択します。
  3. 「スタイルの作成」ページが表示されるので、任意に設定を編集します。GUIで画像編集の設定ができます。「高度な編集」タブでパラメータを直接設定することもできます。
  4. 「保存」ボタンを押してイメージスタイルを保存します。

イメージスタイルの適用

先程のトリミング処理をイメージスタイルとして定義したので、適用してみます。

https://menom-dev.oss-ap-northeast-1.aliyuncs.com/image/reiwa.jpg?x-oss-process=style/png-circle

イメージスタイル

まとめ

OSS、IMGを利用すれば元画像さえストレージにあればURLで柔軟に画像処理が可能になったので
リソースを変えずに任意の画像を容易できるようになります。

今までのようにサムネ画像などを用意する必要がなくなるのですごく便利ですね。
また他にも元画像の保護機能だったり、画像のメタ情報取得などもできるので、
画像を取り扱うのであればOSSは強力なサービスだと思います。

Alibaba Cloudのアカウントを持っていない方もURLを編集することでIMGの機能を試すことが出来るので、
ぜひ今回紹介していない機能も試してみてください。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です