PIYO - Tech & Life -

Electronでの画像処理にsharpを使いました

Electron JS

Electronを触り始めました。

フォルダ選択をして、フォルダ内の画像を一括処理するアプリケーションを作りました。一括処理の中には画像のリサイズやトリミングも含まれます。

画像加工部分にはsharpというライブラリを使いました。ネイティブコードを使うため速いとのことです(そのせいかビルド時にハマリましたが、それはまた後日)。

https://github.com/lovell/sharp

2018/09/10 時点でStar数9000越えですごいですね。

昨日の記事でファイルパスを取得できたところから進めてみようと思います。

https://blog.piyo.tech/posts/2018-09-10-electron-folder-select/

超基本的な使い方としては、ファイルパスを指定して、必要な処理をはさんで、ファイルに書き出すという流れでしょうか。

import sharp from 'sharp';

sharp(filePath)
  .resize(400, 300)
  .xxxx() // ←いろいろな加工ができる
  .yyyy()
  .toFile(outputPath, (err, info) => {
  });

自分で使いそうかな?ってをリストするだけでもこれぐらい↓あるし、

  • resize
  • crop
  • rotate
  • extract
  • flip
  • blur
  • extend
  • background
  • greyscale

他にもいろいろあります。

これらを組み合わせて使います。

例えば、300x300の画像の下100を切り取って300x200にしたいときは次のように書けます。

sharp(filePath)
  .resize(300, 200)
  .crop("north")
  .toFile(...)

300x300の画像に上下左右に100の余白(黒)を入れたいとき、

sharp(filePath)
  .background({ r: 0, g: 0, b: 0, alpha: 1 })
  .extend({ left: 100, top: 100, right: 100, bottom: 100 })
  .toFile(...)

のように組み合わせて使えるわけです。

例えばの用途ですが、画像を決まったサイズに収まるように加工するみたいな処理を一括でかけられそうで良さそうです。

同じような処理はコマンドラインで簡単にできそうですが、Electronなのでビルドして配布すればコマンドなど知らなくてもできるってのがやはりいいですね。

ちょっとした便利機能でも人によってはかなり便利にできそう。

他に検討した画像ライブラリ

ここからいくつか試そうと思いましたが、lwipは最近メンテされていないこと、人気がありそうなjimpはPure JSでパフォーマンスに難があるかも、ということで一番Starの多いsharpにしました。

https://github.com/sindresorhus/awesome-nodejs#image