smartcrop: 画像の重要な部分を自動認識して切り出す

smartcrop.js という画像の重要そうな部分を自動で見つけて抜き出すライブラリが便利そうなのでそれについて。

smartcrop
smartcrop-cli:コマンドライン版のインストール
その他の拡張
ブログで出来そうなこと

smartcrop

smartcropは画像の中から自動で重要そうな部分を見つけて、その部分を中心に適当な大きさに切り出す機能を提供してくれる JavaScriptのライブラリです。

コード自体もそれ程大きくないもので(300行くらい)、やっていることは

ラプラシアンフィルタ¹を使ってエッジを検出。
肌色っぽい領域を検出。
彩度(saturation)が高い領域を検出。
スライディングウィンドウを使って抽出領域の候補を作成。
エッジを避けるようにして、また肌色や彩度の高い領域を中心に来るようにする様にして、それぞれに重要度の点数を付けてランク分け。
一番高いランクを得たものを出力。

と行った感じです。

抜き出す際には指定出力の大きさに応じて適当な大きさに拡大縮小もしてくれます。

元々こんな画像だったものを、200 x 200 pxの出力で指定してみると

こんな感じに。さらに100 x 100 pxにしてみると

こんな感じで200 x 200 pxを縮小したような形になります。

100 x 200 pxな縦長で切り出してみると

な感じになります。

逆に100 x 100 pxの物を200 x 200pxで指定すると当然引き伸ばした感じにはなりますが一応出力は200 x 200 pxの物が出来ます。

その他にも smartcrop.js testsuite 等からサンプルが見れますし、 smartcrop.js testbed へ行くと自分で画像をアップロードして実際に抜き出しを行う事もできます。

smartcrop-cli:コマンドライン版のインストール

自動で抜き出してもらえるので、やはり色々コマンドラインで出来ると便利なこともありますが、 node.jsベースのコマンドライン版の物も配布されています。

ただし、これのパッケージ情報が古くて、直接

$ npm install -g smartcrop-cli

をしようとすると

../node_modules/nan/nan.h:342:68: error: too many arguments to function call, expected at most 2, have 4
    return V8::Signature::New(v8::Isolate::GetCurrent(), receiver, argc, argv);

等から始まって大量のエラーが出てしまいます。

これは依存してる canvas のバージョンが古いからで、現在登録されてるsmartcrop-cliだと

$ npm info smartcrop-cli

{ name: 'smartcrop-cli',
  description: 'Command line interface for the smartcrop library to provide content aware image cropping.',
  'dist-tags': { latest: '0.0.0' },
  versions: [ '0.0.0' ],
  maintainers: [ 'jonas <[email protected]>' ],
  time:
   { modified: '2014-04-03T14:51:46.737Z',
     created: '2014-04-03T14:51:46.737Z',
     '0.0.0': '2014-04-03T14:51:46.737Z' },
  homepage: 'https://github.com/jwagner/smartcrop-cli',
  repository:
   { type: 'git',
     url: 'https://github.com/jwagner/smartcrop-cli.git' },
  author: 'Jonas Wagner <[email protected]> (http://29a.ch/)',
  bugs: { url: 'https://github.com/jwagner/smartcrop-cli/issues' },
  license: 'MIT',
  readmeFilename: 'README.md',
  version: '0.0.0',
  preferGlobal: true,
  bin: { smartcrop: 'smartcrop-cli.js' },
  dependencies:
   { yargs: '~1.2.1',
     canvas: '~1.1.3',
     smartcrop: '~0.0.0',
     underscore: '~1.6.0' },
  dist:
   { shasum: '62b0a2956c8a1a33935079390d0c523b25e6c86a',
     tarball: 'http://registry.npmjs.org/smartcrop-cli/-/smartcrop-cli-0.0.0.tgz' },
  directories: {} }

$

な感じでcanvas: '~1.1.3'となっていますが、現状canvasは1.2の物が出ていてさらにsmartcrop-cliのGitHubのレポジトリでは package.jsonが1周間程前にアップデートされていて '~1.2.10'になっています。

そこで、このレポジトリを取ってきてインストールしていみると

$ git clone https://github.com/jwagner/smartcrop-cli
$ cd smartcrop-cli
$ npm install

とすれば、取り敢えずこのディレクトリに必要な物を取ってきてくれてディレクトリにあるsmartcrop-cli.jsが実行できる様になります。

レポジトリの方のpackage.jsonがアップデートされていたのでそのうちnpmの方でも更新されるだろう、ということで取り敢えずはこの方法で持ってきたものを使って上の画像とかは作りました。

また、Macで使う場合にいくつか問題がありました。

最初に、

Agreeinn to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

みたいなのが出てきましたが、これはXcodeを新しくした後に一度も立ち上げてなかったためで、 Xcodeを一度立ち上げて、そこで規約に同意する作業を行っておけば出なくなります。

最初にnpmでインストールしようとした時、

../src/Canvas.h:19.10: fatal error: 'cario/cario.h' file not found

みたいなエラーが出ました。 carioはHomebrewで他のパッケージをインストールする際に既にインストールされていましたが、パスの設定として

$ export PKG_CONFIG_PATH=/usr/X11/lib/pkgconfig/

を指定しておく必要があるようです²。

これを設定すると、次へ進んで上のnanに関するエラーが出てくるようになりました。

ただ、レポジトリを取ってきてそのまま入れる場合には必要ないです、多分。

その他の拡張

JavaScript以外でも GoとPythonへの拡張もあります。

ブログで出来そうなこと

このブログでは画像を適宜サムネイル化して最初の部分の画像にする様にしてくれるOctopressのプラグインを使っています。

Octopressでサムネイルを作るプラグインを作った

ここでは単に大きさを指定して切り出しているに過ぎないのですが、 smartcropみたいな物を使えばより綺麗にサムネイルが作れるな、と。

手元で入れるだけなら簡単に出来そうなので、そのうちサムネイルの入れ替えをしたいと思います。