rcmdnk's blog

20151024_smartcroptest200200_200_200

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

Sponsored Links

smartcrop

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

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

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

と行った感じです。

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

20151024_smartcroptestorig.jpg

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

20151024_smartcroptest200200.jpg

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

20151024_smartcroptest100100.jpg

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

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

20151024_smartcroptest100200.jpg

な感じになります。

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

20151024_smartcroptestenlarge.jpg

その他にも 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/

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

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

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

その他の拡張

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

ブログで出来そうなこと

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

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

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

Sponsored Links
Sponsored Links

« OS X 10.11.1 El Capitanリリース MacでBetterTouchToolの設定がいきなりなくなった時の復旧方法 »