25
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CDNでリアルタイム画像処理〜imgixを使ってみた

Posted at

前回に続き、使ってみたシリーズです。

imgixとは

Zebrafish Labs Inc.が運営しているリアルタイム画像処理機能付きのCDNサービスです。
Q&Aによると、主要なレンダーファームはサンフランシスコにあり、北アメリカ、ヨーロッパ、アジア、および太平洋にわたって、数十のエッジノードを持っているそうです。
類似サービスとしては、Cloudinaryが挙げられます(こっちの方が有名ですかね)。

imgixを使ってみる

Sourceの設定

アカウントを作ったら、Sourceの設定を行います。
利用するドメインとSource(画像の置き場所)を設定します。
Source TypeはAmazon S3とWeb Folder、Web Proxyから選べます。
Amazon S3を選択した場合はAccess Key、Secret Key等の情報を入力する必要があります。
どうやらAccess Key、Secret Keyを使ってSDKでバケットにアクセスしているらしいので、S3のウェブサイトホスティングは無効にしておいても問題ありませんでした。
IAMのアクセス権限は必要最低限のもの(ListBucket、GetBucketLocation、GetObject)にしておきましょう。

image

画像処理を試してみる

画像URLにクエリパラメータを与えると画像処理を行った画像が返されます。
基本的なリサイズ以外にも、輝度調整等の加工、マスキング、合成など様々な加工が行えます。
詳しくはリファレンス参照のこと。
https://www.imgix.com/docs/reference

以下、いくつか試してみたやつを載せます。

元画像

Lenna.png

image

リサイズ

Lenna.png?w=100

image

クロップ

Lenna.png?w=200&h=400&fit=crop

image

マスキング

Lenna.png?w=200&h=200&fit=crop&mask=ellipse

image

セピア

Lenna.png?sepia=100

image

テキスト合成

Lenna.png?txt=HELLO%20WORLD!&txtsize=62&txtalign=middle,center

image

25
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?