feedtailor Inc. 開発ブログ

ImageMagickで -crop を行う場合、元の画像情報を引き継いでしまうことがあります。そのため、生成された画像をさらに加工しようとすると、思い通りの座標系で加工されなくなってしまいます。

たとえば、ここに240×160のpngがあったとします。

$ identify sample.png
sample.png PNG 240x160 240x160+0+0 8-bit DirectClass 53.6kb

これを適当なサイズで切り抜きます。

$ convert sample.png -crop 64x64+10+10 cropped.png
$ identify cropped.png
cropped.png PNG 64x64 240x160+10+10 8-bit DirectClass 6.63kb

と、ここで、cropped.png に sample.png の情報が引き継がれています。このせいで、たとえば cropped.png をさらに分割しようとしても、原点がずれた状態で分割されてしまうようです。

そこで +repage オプションの登場です。これは画像の持つキャンバス情報をリセットしてくれます。

$ convert sample.png -crop 64x64+10+10 +repage repaged.png
$ identify repaged.png
repaged.png PNG 64x64 64x64+0+0 8-bit DirectClass 6.59kb

これできれいな切り抜き画像ができました。

ある巨大な画像をタイル上に分割したいとき、最初は座標を指定して順番に切り抜いていけばよいかと思っていたんですが、そんな手間はかかりませんでした。

答えを先に書きます。256×256のタイル上に分割するには、

$ convert sample.png -crop 256x256 "sample_%d.png"

これだけでOKです。-crop オプションの引数として widthxheight 以外の位置情報を省略した場合は、画像全体を分割するようになります

ただ、この場合は、分割後のファイルが一続きの連番（この場合は、sample_0.png, sample_1.png …）になってしまうので、元画像のどこに位置するのかがわかりにくいです。そこで、最新バージョンでは新しい表記が可能になりました。それを使うと、

$ convert                     \ # 変換
  sample.png                  \ # 入力ファイル
  -crop 256x256               \ # 256x256で切り抜き
  -set "filename:tile" "%[fx:page.x/256]_%[fx:page.y/256]" \ # ファイルの連番指定
  +repage                     \ # 仮想canvasに関するメタデータをリセット
  +adjoin                     \ # 強制的にファイルを別々に保存
  "sample_%[filename:tile].png" # 出力ファイル名

-set で出力ファイル名の形式を指定し、しかも fx と page によって分割された画像をインデックス化しています。これだと、sample_0_0.png, sample_0_1.png … sample_n_n.png という感じになって、分割画像の行と列をファイル名に含めることができました。

参考 (www.imagemagick.org)

• Tile Cropping, sub-dividing one image into multiple images
• FX Expressions as Format and Annotate Escapes

ちなみに、MacBook (Core2Duo 2.4GHz + 4Gメモリ) で4096×2048の画像を分割すると128分割に1.8sec程度でした。こんなの手作業じゃ無理ですからね。

画像のサムネイルを作るのはよくあることで、最近は画像の中心を正方形で切り出すことが多くなってきました。で、それを簡単に行うサンプルがこれ。

$ convert              \ # 変換
  "sample.jpg[64x64^]" \ # 入力ファイル+リサイズ（最小値指定）
  -gravity Center      \ # 中心原点
  -crop 64x64+0+0      \ # 64x64 で切り抜き（+0+0を指定することで全体を分割しない）
  sample_t.jpg           # 出力ファイル

あらかじめ画像を64×64に外接する形で縮小し、画像中心を原点に64×64で切り抜く。書いてしまうとそういうことですが、これをスクリプトなんかに埋め込めば、複数の画像のサムネイルを一気に作ることも簡単です。

コマンドラインの高機能画像変換ツールとしてオープンソースのImageMagickがあります。ちょっとした画像変換や、ループ処理なんかではかなりの威力を発揮するようで。（もちろん、使いこなせば、ものすごく強力なツールですが）

• ImageMagick: Convert, Edit, and Compose Images

さて、まずは、手元のMacにインストールしてみましょう。

ImageMagick はもとから MacPorts に対応しているので、MacPorts をインストールしていれば、非常に簡単です。

$ sudo port install imagemagick

これだけで、しばらく待っていると（そこそこ時間がかかります）インストールが完了します。執筆時点での最新版は 6.5.4-0 でした。

せっかくなので、簡単な例を一つ。

iPhoneのスクリーンショットをAppStore用に加工したい場合、ステータスバーの領域を取り除きたいときってありますよね。こんな時はこれだけで一発OKなのです。

$ mogrify            \ # 画像変換
  -format jpg        \ # 出力はjpg
  -crop 320x460+0+20 \ # y成分20pxをのぞいて320x460で切り出し
  *.png                # 入力はpng

png画像を320×460で切り出して、jpgに変換し、同名のファイルとして保存。それが一瞬でできました。これは便利ですねえ。

今後も便利なコマンド例を載せていけたらと思います。