Photon API を使って WordPress で画像処理

2013/04/13WordPress

WordPress.com と WordPress のプラグイン Jetpack で提供されている Photon を利用すると画像の配信を WordPress の CDN を利用できるほか、画像の URL にパラメーターを付けることで、画像の縮小や、トリミング、フィルター処理などができます。

※ Photon は、WordPress.com ユーザーと Jetpack を利用して WordPress と接続したユーザーのみ利用できます。

Photon の URL

https://i0.wp.com/example.jp/foo.jpg

CDN の URL は、https://i0.wp.com/ の後ろに画像の URL を付けます。i0.wp.com と i1.wp.com と i2.wp.com があります。http 以外に https もサポートしています。

※ WordPress の記事中の画像は、プラグインが勝手に URL を置き換えてくれます。

Photo API

Photon は API が提供されていて、次のようにパラメーターを付けると、画像に処理を加えられます。

https://i0.wp.com/example.jp/foo.jpg?w=280&filter=sepia

元画像

順番に Photn API を使ってできる処理をすべて見ていきます。元画像はこれを使います（縮小表示しています）。

横幅を指定して縮小 ?w=

指定した横幅に縮小。

https://i0.wp.com/example.jp/foo.jpg?w=280

値は、単位を付けないとピクセル、パーセントで ?w=50% のような指定もできます。

縦幅を指定して縮小 ?h=

指定した縦幅に縮小。

https://i0.wp.com/example.jp/foo.jpg?h=210

値は、単位を付けないとピクセル、パーセントで ?h=50% のような指定もできます。

トリミング ?crop=x,y,w,h

左上の x, y 座標と width, height（横幅・縦幅）を指定してトリミング。

https://i0.wp.com/example.jp/foo.jpg?crop=12,10,30,28

値は、単位を付けないとパーセント。つまり、上の場合は、左上から 12%, 10% の位置から 30%, 30% の部分をトリミング。ピクセルで ?crop=100px,50px,300px,255px のような指定もできます。

組み合わせて ?crop=100px,30,300px,30 のような指定もできます。

縮小とトリミング ?resize=w,h

width, height（横幅・縦幅）を指定すると、その大きさに縮小し、その幅に合うように上下または左右の切り取り。

https://i0.wp.com/example.jp/foo.jpg?resize=200,300

https://i0.wp.com/example.jp/foo.jpg?resize=300,150

単位はピクセルです。

指定した幅にフィットするよう縮小 ?fit=w,h

width, height（横幅・縦幅）を指定すると、その大きさに収まるよう縮小。ぴったりの大きさでない限り、画像によって縦または横の幅が、指定より小さくなります。

https://i0.wp.com/example.jp/foo.jpg?fit=300,300

単位はピクセルです。300,300 と指定していますが、横長の画像のため縦は 300px より小さくなります。

黒の余白の追加 ?lb=w,h

width, height（横幅・縦幅）を指定すると、その大きさに収まるよう縮小。ぴったりの大きさでない場合、上下または左右に黒色の余白を付けた画像になります。letterboxing というらしい。

https://i0.wp.com/example.jp/foo.jpg?lb=300,300

黒の余白の削除 ?ulb=true

黒の余白が付いた画像を指定すると、余白部分を削除。

https://i0.wp.com/example.jp/foo.jpg?ulb=true

元画像

ulb=true

フィルター ?filter=

フィルターの適用。negate, grayscale, sepia, edgedetect, emboss, blurgaussian, blurselective, meanremoval のいずれかを指定（指定できる値はひとつ）。

https://i0.wp.com/example.jp/foo.jpg?filter=negate

ぼかしを比較するとこんな感じ。

輝度 ?brightness=

輝度の変更。-255～255 の値を指定します。

https://i0.wp.com/example.jp/foo.jpg?brightness=-50

コントラスト ?contrast=

コントラストの変更。-100～100 の値を指定します。

https://i0.wp.com/example.jp/foo.jpg?contrast=-40

カラー化 ?colorize=r,g,b

Red, Green, Blue の値を指定すると、その色相へ変更。各値は 0～250 の範囲で指定します。

https://i0.wp.com/example.jp/foo.jpg?colorize=100,0,0

スムージング ?smooth=

画像を滑らかにするスムージング（平滑化）処理を行います。

https://i0.wp.com/example.jp/foo.jpg?smooth=1

指定する値は 3×3 画素の中央の注目がその重みです。1を指定すると、各画素が注目画素と周りの8画素の9画素の平均値になります。小数点の値も指定できます。2048以上の値を指定すると変化しません。

ズーム ?zoom=

高解像度のピクセル密度のデバイスやブラウザーのズーム機能のための指定です。スクリプトから利用を想定した機能です。指定した倍率に拡大します。値は、1, 1.5, 2～10 です。crop と一緒には使えません。

https://i0.wp.com/example.jp/foo.jpg?w=150&zoom=2

w=150 と zoom=2 のため 300px 幅の画像が得られます。zoom 指定は、画像を元サイズより拡大するものではありません。

リソース

詳細および開発者向けの Photon 情報は、公式の Photon | Developer Resources から。

Photon は オープンソースのため、実際の処理内容も読み取れます。