モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

画像の周りに透明な余白を追加する!:Node.js

【 今回やること! 】

  • Node.jsで、画像処理ライブラリの『Jimp』をインストールします。
  • 画像の周りに余白を追加するプログラムを作成します。
    • フォルダ内の複数の画像ファイルを一括処理します。
 
 下記の記事のあとがきで、画像の周りに余白が欲しいという話をしました。 
 やりたいのはこんな感じです。
    f:id:mmorley:20190730214007p:plain:w450
 
 GIMPやIncscape等の画像編集・加工ソフトで出来ますが、画像ファイルの数が多いと面倒なので、Node.jsのプログラムを書いて一括処理できるようにします。
 
 それでは作成します!

使用環境

 私が使用している環境です。

Node.jsをインストール

 Node.jsの環境の作成は、下記の記事を参考にして下さい。

JIMPとは

 Node.js用の画像処理ライブラリです。画像の拡大縮小、回転、切り貼りが出来ます。jpegpngbmptiff、gif形式に対応しています。

  • 『JIMP』の公式サイトです。
    www.npmjs.com
    今回の作業では、見に行く必要はないです。関数の仕様等の説明があります。

JIMPをインストール

  1. Macの『ターミナル』を起動
    f:id:mmorley:20190731161842p:plain

    『ターミナル』で作業

  2. デスクトップに作業フォルダ『workspace』を作る

    mkdir /Users/(ユーザ名)/Desktop/workspace

  3. カレントディレクトリを『workspace』にする

    cd /Users/(ユーザ名)/Desktop/workspace

  4. カレントディレクトリに『JIMP』をインストール

    npm install jimp

画像に余白を作るプログラムを作成

    『ターミナル』で作業

  1. カレントディレクトリに空のJavaScriptファイルを作成

    touch jimp_spacing.js

  2. 『jimp_spacing.js』を『テキストエディット』で開く

    open jimp_spacing.js -e

    『テキストエディット』で作業

  3. 下記のコードを『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); // 画像ファイルを保存
                    });
                });
            }
        });
    })();
    

プログラムの実行方法

    『ターミナル』で作業

  1. 下記の設定でプログラムを実行
    • 余白の幅:5ピクセル
    • 画像フォルダ:『/Users/(ユーザ名)/Desktop/Images』

    node jimp_spacing.js 5 /Users/(ユーザ名)/Desktop/Images

    『node jimp_spacing.js』の後に『 (スペース)』区切りで、『余白の幅』、『画像フォルダのパス』を入力して実行します。
     
    『画像フォルダのパス』の入力は、『node jimp_spacing.js 5 』まで打ち込んだ後に『Finder』から『ターミナル』に『画像フォルダ』をドラッグ&ドロップして入力することが出来ます。

あとがき

 JIMPには、キャンバスサイズを変更する機能がありませんでした。見つけられなかっただけかも知れませんが。
 なので、背景が透明で余白の分だけサイズを大きくした新規画像を用意して、中央に元画像を貼り付ける処理を行いました。