見出し画像

画像変換サービス ImageFlux のクリッピング機能について

ImageFluxに関しての17ヶ月ぶりのノートです、そしてこのノートが取り上げるクリッピング機能ですが、このページがあって良かった!!と思ってくれる人は1年に1人いるかいないか、それぐらいのニッチなことを取り上げている気がします。

なぜそんなニッチな機能(パラメーター)についてわざわざノートを書いているか、、、ものすごく細かく挙動について調べたので、その結果を1回提供してそのままお蔵入りにするのが忍びなかっただけです。

どなたかのお役に立てたら幸いです!

ImageFlux とは

クリッピングとは

クリッピング(Clip)とは 画像の一部を切り出す 機能のことです。クロッピング(Crop)も同じ意味で使われていると思います。微妙なニュアンスや用いられ方が違うとは思いますがこのノートでは同じ意味としています。

クリッピング方法は2種類

クリッピングをする対象画像が何か、によって大きく分けてまず2つにわけることができます。1つが入力画像(拡大・縮小などの加工前の画像)に対してのパラメーター、もう1つが出力画像(拡大・縮小などの加工後の画像)に対したのパラメーターとなります。

画像3

1) 原点をどこにするか

入力画像に対しては ig で、出力画像に対しては og を使用します。
X軸,Y軸の +(プラス)方向は各原点によって以下のように決まります。

画像2

2-A) クリッピング後のサイズをピクセル単位で指定

クリッピング後のサイズをピクセル単位で指定したい場合は、入力画像に対しては ic で、出力画像に対しては oc を使用します。

画像3

もう少し具体的な方眼で見てみましょう。
パラメーター ig , og = 1 , 3 , 7 , 9 の場合です。

画像4

原点によってX軸,Y軸の +(プラス)方向) が違うことを思い出してください。

パラメーター ig , og = 2 , 4 , 5 , 6 , 8 の場合は重心を考慮する必要!!があります。パラメーターとして渡す x1 , y1 , x2 , y2 とクリッピングで切り抜かれる画像の関係はどうなるのか、いくつかのパターンを追ってみました。(今回はいずれもX軸は右に、Y軸は下が正となるパターン)

画像5

いや、本当に重心とか勘弁してほしい、複雑です!!

2-B) クリッピング後のサイズを割合で指定

クリッピング後のサイズを割合で指定したい場合は、入力画像に対しては icr で、出力画像に対しては ocr を使用します。

画像6

まとめ

画像のクリッピングに関するパラメーターは ImageMagick などでもそうですが、とても難解な印象を持っています。いろいろと調べてみましたが、これは!と情報をまとまっているサイトを見つけることはできませんでした。

そのため、もしこのパラメーターを使いたいときには独断と偏見ですが、

x1 , y1 , x2 , y2 には正の値が分かり易くお勧めです
 (何を言っているかわかりますよね...そうです負の値も指定可能です)
g=1の利用が分かり易くお勧めです

だと思います。

最後にサンプルURL

方眼の元画像URL
http://p1-a772d5e5.imageflux.jp/hougan.png

2-A 1つ目の画像 左側の画像URL
http://p1-a772d5e5.imageflux.jp/c/og=5,oc=-100:-100:200:200/hougan.png

2-A 1つ目の画像 右側の画像URL
http://p1-a772d5e5.imageflux.jp/c/og=1,oc=-100:-100:200:200/hougan.png

2-A 2つ目の画像 左上の画像URL
http://p1-a772d5e5.imageflux.jp/c/og=1,oc=100:100:200:200/hougan.png

2-A 2つ目の画像 右下の画像URL
http://p1-a772d5e5.imageflux.jp/c/og=9,oc=100:100:200:200/hougan.png

2-A 3つ目の画像 上の画像URL (重心複雑すぎ...)
http://p1-a772d5e5.imageflux.jp/c/og=2,oc=0:0:100:100/hougan.png

2-B 画像URL
http://p1-a772d5e5.imageflux.jp/c/og=1,ocr=0.1:0.1:0.9:0.9/hougan.png

参考になれば幸いです!

この記事が気に入ったらサポートをしてみませんか?