【 今回やること! 】
- Node.jsで、画像処理ライブラリの『Jimp』をインストールします。
- 画像の周りに余白を追加するプログラムを作成します。
- フォルダ内の複数の画像ファイルを一括処理します。
下記の記事のあとがきで、画像の周りに余白が欲しいという話をしました。
やりたいのはこんな感じです。
GIMPやIncscape等の画像編集・加工ソフトで出来ますが、画像ファイルの数が多いと面倒なので、Node.jsのプログラムを書いて一括処理できるようにします。
それでは作成します!
使用環境
私が使用している環境です。
- Mac OS X El Capitan Version 10.11.6
- Node.js v10.15.0
- Visual Studio Code Version 1.36.1
- ブラウザ:Google Chrome Version 75.0.3770.142 (64-bit)
JIMPとは
Node.js用の画像処理ライブラリです。画像の拡大縮小、回転、切り貼りが出来ます。jpeg、png、bmp、tiff、gif形式に対応しています。
- 『JIMP』の公式サイトです。
www.npmjs.com
今回の作業では、見に行く必要はないです。関数の仕様等の説明があります。
JIMPをインストール
画像に余白を作るプログラムを作成
- カレントディレクトリに空のJavaScriptファイルを作成
touch jimp_spacing.js
- 『jimp_spacing.js』を『テキストエディット』で開く
open jimp_spacing.js -e
『テキストエディット』で作業
- 下記のコードを『jimp_spacing.js』に貼り付けて保存する
var fs = require('fs'); // File System(Node API):ファイル操作 var path = require('path'); // Path(Node API):パスの文字列操作 var Jimp = require('jimp'); // JIMP:画像ファイルの加工 (function runSpacing(){ let dirTarget = process.argv[3]; // 画像フォルダ let files = fs.readdirSync(dirTarget); // フォルダ内のファイル&サブフォルダのリストを取得 files.forEach(function(file){ // ファイル&サブフォルダの数だけループ let ext = path.extname(file).toLowerCase(); if (ext == ".png" || ext == ".jpg" || ext == ".jpeg") { // 拡張子の判別 let fullPath = path.join(dirTarget, file); // ファイルのフルパスを取得 Jimp.read(fullPath, function(err, readImage){ // 画像ファイルを読み込む let w = readImage.bitmap.width; // 画像の幅を取得 let h = readImage.bitmap.height; // 画像の高さを取得 let span = Number(process.argv[2]); // 余白の幅、単位はピクセル let color = 0x00000000; // 余白の色 // 元画像に上下左右の余白を足したサイズの新規画像を作成 let baseImage = new Jimp(w + span * 2, h + span * 2, color, function (err, baseImage){ console.log('file = ' + file + ", w = " + w + ", h = " + h); // 元画像のファイル名とサイズを表示 baseImage.composite(readImage, span, span) // 指定した座標に画像を貼り付ける .write(fullPath); // 画像ファイルを保存 }); }); } }); })();
『ターミナル』で作業
プログラムの実行方法
- 下記の設定でプログラムを実行
- 余白の幅:5ピクセル
- 画像フォルダ:『/Users/(ユーザ名)/Desktop/Images』
node jimp_spacing.js 5 /Users/(ユーザ名)/Desktop/Images
『node jimp_spacing.js』の後に『 (スペース)』区切りで、『余白の幅』、『画像フォルダのパス』を入力して実行します。
『画像フォルダのパス』の入力は、『node jimp_spacing.js 5 』まで打ち込んだ後に『Finder』から『ターミナル』に『画像フォルダ』をドラッグ&ドロップして入力することが出来ます。 - 余白の幅:5ピクセル
『ターミナル』で作業
あとがき
JIMPには、キャンバスサイズを変更する機能がありませんでした。見つけられなかっただけかも知れませんが。
なので、背景が透明で余白の分だけサイズを大きくした新規画像を用意して、中央に元画像を貼り付ける処理を行いました。