urlに書くだけで投稿中にある画像を簡単トリミング! Photon API

Image

WordPressのプラグインの定番Jetpackを利用しています。Jetpackを入れると統計情報や関連記事の表示のほか多くの機能を利用することが出来ます。

Jetpackの関連記事はアイキャッチでなく、記事中画像からアイコンを出している?

このサイトで表示している関連記事もJetpackで出しています。オプションの「Use a large and visually striking layout」にチェックを入れると記事のアイコンが表示されるようになりました。

Image

今のところ、記事にアイキャッチ画像をほとんど指定してません。使われている画像は記事中にある画像です。どうしてこのようにでるのかな?と不思議に思ったのでソースを見てみました。以下のようになっていました。

http://i0.wp.com/ ?? どうやらAPIを使って画像を加工して返してくれてるようです。

ただ単に大きさを幅もしくは高さ指定で小さくするだけならimgで指定できると思いますが、このAPIではトリミングをしてくれているようです。

このurlをもとにググって調べたらこれは Photon API というものだということがわかりました。

Photon とは画像を加工してくれるAPIみたいです

とてもわかりやすいサイトを発見しました!

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

それによると

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

というものだそうです。

またマニュアルもこちらにありました。

http://developer.wordpress.com/docs/photon/

Jetpackをインストールしてあれば使えるようなので早速試してみます。

大きな画像を加工してみる

Image

これは1000×1000ピクセルの画像です。画像urlは

これを使っていくつかのパターンを試してみました。

300×500のサイズにトリミングしてみる

?の後に resize=幅,高さ をピクセル数で指定します。resizeの時、数値だけの指定はピクセルになります。


位置を指定してトリミングしてみる

この写真ですがよく見ると上部真ん中あたりに鳥が飛んでいます。この部分だけを切り取ることも可能です。

?の後に crop=x位置,y位置,幅,高さ を指定します。この指定の時は数値だけの指定は%になるため、ピクセル数を指定したい場合は数値の後に px とつけます。


位置を指定してトリミングしてかつ画像サイズを小さくする

パラメーターは & でつなげれば複数指定することもできるようです。
この画像の桜並木と川の部分を横長に切り取ってかつ、幅を500pxで表示してみました。


フィルターや輝度、コントラスト、カラー化などなど…様々な加工が出来ます

フィルターを指定する
filter= でフィルター種類を指定できます。例えばsepiaを指定してみました。


ちょっと昭和っぽいですかね?

輝度を指定して明るくする

brightness= で数値を指定すると輝度を調整して+の数値を入れれば明るく、-の数値を入れれば暗くなるようです。brightness=50 を追加指定してみました。


コントラストを指定する

contrast= で数値を指定するとコントラストを調整して+の数値を入れれば強く、-の数値を入れれば弱くなるようです。contrast=100 を追加指定してみました。


カラー化

colorize=R,G,B でR(赤)、G(緑)、B(青)の数値を指定するとその色を調整して+の数値を入れれば強く、-の数値を入れれば弱くなるようです。colorize=0,0,150 を追加指定して青を強めにしてみました。


このほかのもありますが紹介しきれません(^_^;。こちらのページを見ると、だいたいどんなことができるか画像で分かると思います↓

http://developer.wordpress.com/docs/photon/api/

まだまだ色々できそうですね。このAPIを使って画像加工を試していきたいなと思います。楽しみです♪

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る