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

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

jetpack

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

Photon の URL

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

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

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

Photo API

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

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

元画像

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

ストラップ

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

指定した横幅に縮小。

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

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

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

指定した縦幅に縮小。

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

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

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

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

http://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(横幅・縦幅)を指定すると、その大きさに縮小し、その幅に合うように上下または左右の切り取り。

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

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

単位はピクセルです。

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

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

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

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

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

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

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

黒の余白の削除 ?ulb=true

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

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

元画像
letterboxing-example

ulb=true

フィルター ?filter=

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

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

元画像
negate 反転
grayscale グレイスケール
sepia セピア
edgedetect 輪郭検出
emboss エンボス
blurgaussian ガウスぼかし
blurselective 輪郭以外ぼかし
meanremoval 平均除去

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

meanremoval
blurselective

輝度 ?brightness=

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

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

brightness=-50
brightness=0
brightness=50

コントラスト ?contrast=

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

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

contrast=-40
contrast=0
contrast=40

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

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

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

colorize=100,0,0
colorize=0,100,0
colorize=0,0,100

スムージング ?smooth=

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

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

元画像
smooth=1
smooth=-5

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

ズーム ?zoom=

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

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

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

リソース

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

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