- 現在利用している言語や技術の記法や不明点等を記録していく記事第六弾。
- この記事が備忘録としての機能を果たした瞬間が、最近訪れた遅延ぶり。
- 今回は、コマンド上での素早い画像変換が可能な、npmパッケージの「jimp」を試用することにしよう。
概要
- JavaScript製の画像処理ライブラリ。
- 画像の形式変換や色彩変更等、多様な画像処理に対応している。
- コマンドとブラウザの両方に対応しているため、 Webアプリへの組み込みも容易。
- 公式Github
特徴
様々な画像処理メソッド
- 画像リサイズや色彩変更等の基本的な編集処理から、形式変換や画像比較等の高度な処理まで、様々なメソッドが容易されている。
アプリケーションへの埋め込み
- ブラウザ上のJavaScrip環境にも対応しているため、Webアプリケーションへの埋め込みも容易。
結果
- 下記のように、簡単なjsファイルを実行するだけで、素早い画像変換が可能。
- また、ローカルファイルだけではなく、画像URLの変換も可能。
- また、色やリサイズ等の画像編集した上での変換も可能。
環境
- Mac OS X 10.13.4
- NodeJs v11.6.0
- npm 6.9.0
- ※今回は、コマンドを利用した画像変換のため、Webアプリケーションへの埋め込み方法はこちらを参考する。
インストール
- ※jimpは、Node.jsを利用するため、インストールが未完了の場合、こちらを参考にインストールする。
npmでのインストール
- Node.jsパッケージ管理の
npmでのインストールの場合、下記のコマンドをうち、導入する。- ※今回は作業フォルダを作成して、ここにjimpをインストールする。
# 作業フォルダの作成
$ mkdir ~/work
# 作業フォルダへの移動
$ cd ~/work
# jimpのインストール
$ sudo npm install --save jimp
yarnでのインストール
- Node.jsパッケージ管理の
yarnでのインストールの場合、下記のコマンドをうち、導入する。- ※上記のnpmでの手順同様に、作業フォルダを作成して、ここにjimpをインストールする。
# 作業フォルダの作成
$ mkdir ~/work
# 作業フォルダへの移動
$ cd ~/work
# jimpのインストール
$ sudo yarn add jimp
手順
基本的な画像形式変換の例
画像の準備
- 上記のインストール手順で、「jimpのインストール・作業フォルダの作成」が完了したら、ファイル構造が下記であるか確認する。
├─ work
├── node_modules
├── package-lock.json
- 構造の確認後、変換対象として利用する画像を準備して、workフォルダの中に入れる。
- ※画像URLを利用する場合、URLをメモしておくだけでよく、配置作業は必要ない。
├─ work
├── node_modules
├── package-lock.json
├── penguin.png
変換用JSファイルの作成
- 画像の準備後、先ほどのworkフォルダに任意の名前でJSファイルを作成する。
# 「convert.js」という名前のJSファイルを作成
$ touch ~/work/convert.js
├─ work
├── node_modules
├── package-lock.json
├── penguin.png
├── convert.js
JSファイルの記述
- 先ほど作成したJSファイルの中身を下記のようにする。
~/work/convert.js
const Jimp = require("jimp");
// 「process.argv[2]」に、引数として指定する変換対象ファイル名が渡される。
Jimp.read(process.argv[2], (err, image) => {
if (err) {
console.log(err);
} else {
// 「process.argv[3]」に、引数として指定する作成ファイル名が渡される。
image.write(process.argv[3]);
}
});
ファイルの実行
- ファイルの記述後、ターミナルへ戻り、下記のコマンドをうち、画像変換処理を行う。
- ※画像URLを利用する場合、下記のコマンドの「penguin.png」をURLに変えるだけで良い。
# 作業フォルダの移動
$ cd ~/work
# 例 : 「node 実行ファイル名 フォルダ内の対象画像ファイル名(もしくは画像URL) 作成画像ファイル名(任意)」
$ node convert.js penguin.png penguin.jpg
- コマンド実行後、作成したファイルがフォルダの中に確認できれば完了。
その他の画像処理メソッドを利用した例
- 「jimp」の様々な画像処理メソッドの中から、下記の基礎的なメソッドの利用例を見ていく。
-
resize: 画像のサイズ変換処理 -
invert: 色の反転 - ※その他の膨大な処理メソッド一覧はこちらを確認
-
JSファイルの記述
- 先程の「基本的な画像形式変換の例」ステップで利用したJSファイルを、下記のようにする。
~/work/convert.js
const Jimp = require("jimp");
Jimp.read(process.argv[2], (err, image) => {
if (err) {
console.log(err);
} else {
image
// 「process.argv[4]」に、引数として指定する高さが渡される。
// 「(幅、高さ)」の形式で指定。「Jimp.AUTO」で高さに合わせた最適な値を自動指定。
// ※resizeの指定値は数値のため、parseIntで変換する必要がある。
.resize(Jimp.AUTO, parseInt(process.argv[4]))
// 反転メソッド
.invert()
.write(process.argv[3]);
}
});
ファイルの実行
- 記述後、ターミナルへ戻り、下記のコマンドをうち、画像変換処理(リサイズ・色反転)を行う。
# 作業フォルダへ移動
$ cd ~/work
# 例 : 「node 実行ファイル名 フォルダ内の対象画像ファイル名 作成画像ファイル名(任意) 高さ」
$ node convert.js penguin.png penguin2.jpg 250
- コマンド実行後、作成したファイルがフォルダの中に確認できれば完了。
まとめ
- 今回は、パッケージを利用した画像処理ということで、「賢人依存形式の私に最適」と個人呟きを繰り返しながら、記事を書く。
- 益々の画面遷移回数の削減と作業の効率化は、果たして正式にお祈りするべきなのか疑問。
- パッケージ利用の真髄を更に味わうべく、今後も定期的に調査・試用することにしよう。
参考
-
https://github.com/oliver-moran/jimp/tree/master/packages/jimp
→公式Gihubです。大変お世話になりました。 -
https://s8a.jp/javascript-image-processing-library-jimp
→こちらを参考にしました。大変お世話になりました。