image-ghostについて

image-ghost は画像を好きなサイズで書き出すことができる node のライブラリツールです。
書き出し後の画像名なども設定できます。ライブラリ自体は GraphicsMagick を利用しております。
image-ghost を使えば書き出し後のパスの設定やフォルダにある個々の画像も json を使って一気にリサイズして書き出すことができます。
コマンドから一発で叩けるので jenkins との組み合わせでも書き出すことができるようになっております。

なぜこのライブラリを作ったのか

フロントエンドでは多くの種類の画像サイズを扱うことがあるからです。例えば「favicon」やアプリのアイコンなどがあがります。
現在、angular で管理画面を作成しておりますが、apple-icon は 57x~180x のサイズまで書き出しております。
それを一枚一枚gitで管理するのは実に面倒ですね。
photoshop でスクリプトを組んだり、アクションを使うのも有効ですが、やっぱり画像は一枚で管理したいという方におすすめです。
json を使ったレンダリングではオブジェク形式で path、画像名、画像サイズをそれぞれに設定できます。なのでこのツール一つあれば楽に管理することができるということです。
また大量の画像を一度にそれぞれ別名で切り出したり、それぞれ指定したフォルダに書き出すこともできます。
cpu のコア数によって別々のプロセスが作られるので並列処理が可能というわけです。ノンブロッキングI/Oの特徴を活かしました。

メリット

ビルドのタスクに加えて実行できる

ウェブサイトであれば Internet Explorer をはじめとする主なブラウザが favicon.ico をサポートしています。
しかしパソコン、スマートフォン、タブレット端末などの様々なデバイスに対応させるためにはそれぞれのデバイスに合ったサイズの favicon.ico を用意する必要があります。
favicon.ico のような複数のサイズの画像を作成するためにオンラインサービスを利用することもできますが、できればそういった手間は自動化させたいところです。
image-ghost であればビルドテストのためには欠かせない CI ツールの Jenkins などによるデプロイにビルドタスクとしてタスクを組むことができるのでツールの組み合わせ次第で業務の効率化を図ることができます。

画像を一括でリサイズできる

単体画像でのリサイズは勿論のこと、複数の画像のリサイズにも対応してます。
複数画像のリサイズの場合、JSON ファイルが必要です。書き出す画像の情報として、画像名、サイズ(幅と高さまたは比率)、パス(書き出し後に置かれる)などが設定できます。

画像リサイズ用の API が提供されている

メリットの一つとして画像リサイズ用の API が提供されているので、スクリプトファイルから API 関数の呼び出しが可能です。

使い方

インストール

インストールするにはまず node が実行できる環境と「GraphicsMagick」を用意する必要があります。
mac であれば homebrew の brew コマンドで「GraphicsMagick」をインストールすることができます。

graphicsmagick のインストール

  1. brew install graphicsmagick

image-ghost のインストール

  1. npm i @eq-inc/image-ghost

実行の仕方

image-ghostは単一画像としての書き出しまたは複数の画像としての書き出しの両方ができます。単一画像での書き出しはコマンド一つでできますが、複数での書き出しの場合はjsonが必要です。

単一画像での書き出し

インストール後は下記のようなコマンドで実行できます。

  1. node ./node_modules/\@eq-inc/image-ghost/bin/resize.js -w 290 ./readPath/imgs/dummy.png ./exportPath/image.png

有効なオプションは下記になります。
- -w or --width → 画像のwidth設定
- -h or --height → 画像のheight設定
- -p or --percent 参照比率でのレンダリング
- -f or --format レンダリング後の画像フォーマット。jpegまたはpngが指定できます。

複数画像での書き出し

実行は下記のようなコマンドです。

  1. node ./node_modules/\@eq-inc/image-ghost/bin/image-ghost readPath/task.json

jsonまでのパスを指定してください。jsonでの参考例は下記になります。

  1. [
  2. {
  3. "src": "test/imgs/test.png", // srcパスはtargetです。
  4. "dest": "test/imgs/export/test.png",
  5. "percent": 50 // この場合、イメージは50%の比率で作成されます。
  6. },
  7. {
  8. "src": "test/imgs", // srcがディレクトリの場合、イメージはそれぞれのdestパスに作成されます。
  9. "dest": "test/imgs/export", // このイメージはこのパスに従って作成されます。
  10. "width": 50 // 幅または高さのいずれかが必要です
  11. },
  12. {
  13. "src": "test/imgs/test.png",
  14. "dest": "test/imgs/export", // このイメージはパスに従って作成されます。
  15. "height": 150,
  16. "extension": "png", // png、jpegなどを指定できます
  17. "filename": "{{ basename }}{{height}}.{{ extension}}" // filenameはサイズ変更後のイメージ名、basenameはsrcイメージ名です。
  18. },
  19. {
  20. "src": "test/imgs",
  21. "dest": "test/imgs/export",
  22. "percent": 85,
  23. "extension": "jpg", // png、jpegなどを指定できます
  24. "filename": "{{ basename }}{{percent}}.{{ extension}}"
  25. }
  26. ]

有効な変数は下記になります。
- {{dirname}} サイズ変更する前のディレクトリパス。ターゲットdestプロパティのフルパスを意味します。
- {{filename}} サイズ変更前の拡張子を含むイメージ名。
- {{basename}} サイズ変更前の画像名は拡張子を含まない。
- {{extension}} 拡張子はイメージの拡張子を変更する前です。
- {{width}} 書き出し後の画像の幅。指定がなければ空の文字列に変換されます。
- {{height}} 書き出し後の画像の高さ。指定がなければ空の文字列に変換されます。
- {{percent}} 書き出し後の画像の比率。指定がなければ空の文字列に変換されます。

APIとしての実行

image-ghost は api としても使うことができます。

まずはローカルにインストールします

  1. npm i image-ghost

使い方

  1. image_ghost.resize(path[, option][, callback]);
  • path | ファイルパスまたはファイルバッファ
  • option
    • width 書き出される画像のwidth
    • height 書き出される画像のheight
    • percent 書き出される画像に対しての読み込んだ画像の比率
      width/height または percentが指定できます。
  • callback コールバックを渡すことができます。promise または promise を用いない関数を渡すことができます。返り値は画像バッファです。

サンプル

  1. const fs = require('fs'),
  2. image_ghost = require('@eq-inc/image-ghost'),
  3. image = fs.readFileSync('./image.jpg'),
  4. options = {
  5. width: 640
  6. };
  7.  
  8. // Promise
  9. image_ghost.resize(image, options).then(function (result) {
  10. fs.writeFileSync('./resized.jpg', result);
  11. });
  12.  
  13. // Callback
  14. image_ghost.resize(image, options, function (error, result) {
  15. if (error) {
  16. console.log(error);
  17. process.exit(1);
  18. }
  19.  
  20. fs.writeFileSync('./resized.jpg', result);
  21. });

詳細はこちらから
https://www.npmjs.com/package/@eq-inc/image-ghost

コメントの投稿