PIYO - Tech & Life -

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

Electron JS

Electronを触り始めました。

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

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

GitHub - lovell/sharp: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library. - lovell/sharp

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

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

Electronでフォルダ内のファイル一覧を取得して処理する - PIYO - Tech & Life -
Electronを触り始めました。 ファイルを指定する Electronではブラウザよりも柔軟なファイル選択が可能です。フォルダ選択が可能なため、今回は対象のファイルを一括で指定するためにフォルダ選択を用

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

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にしました。

GitHub - sindresorhus/awesome-nodejs: Delightful Node.js packages and resources
:zap: Delightful Node.js packages and resources. Contribute to sindresorhus/awesome-nodejs development by creating an account on GitHub.