Node.jsで複数の画像ファイルをリサイズする方法


## 前置き的な話

Facebookグループにアップしたい写真がいくつかあったのですが

- 元画像の解像度が高い
- そんなに回線速くない（スマフォをテザリングして利用してて、）環境

という状況だったので、だったらリサイズすればと思って調べたついでに過去、自分のブログにまとめていたのですが、Qiitaで検索する機会が自分の中であがってきたのでこっちにもまとめることにしました。

なお、最初GraphicsMagick for node.jsな[gmという](http://aheckmann.github.io/gm/)モジュール試したのですが、サンプル通りにやってもリサイズ出来なかったので、[NODE.JS MODULES](https://nodejsmodules.org/)のresizeタグで一番上にあった[easyimage](https://github.com/hacksparrow/node-easyimage)を試したら、意図したように動作したのでこちらを利用しました。


## 利用するための準備

ドキュメントにも書いてありますが、このたぐいの画像処理なモジュールはImageMagickを利用して処理するようで、まずそれがインストールされてるのが前提とのこと。

### imagemagickのインストール

以前自分は別の処理するのにこれインストール済でしたが、Mac使っててbrew 経由でインストール出来る環境作ってるので

```sh
brew install imagemagick
```

として、少し時間かかりますが、インストール出来ます。

### easyimageのインストール

```sh
npm init
npm install easyimage --save-dev
```
という感じでインストールしました。CoffeeScriptで書こうと思ったので一応

```sh
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-coffee --save-dev
```
とかもしたので最終的にpackage.jsonはこのようになりました。（ただCoffeeScript使わず、素のJavaScriptで書いたのであまり意味がなかったかも。。）

```javascript
{
  "name": "imageResize",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-coffee": "~0.9.0",
    "easyimage": "~0.1.6"
  }
}
```

### 画像が置いてあるディレクトリと出力先のディレクトリを準備

画像置いてる場所と別の場所にリサイズしたファイルを置きたかったので「img」[out」というディレクトリを作り、imgに変換元画像を置いたので、こんな感じになりました。

```sh
.
├── img
│   ├── IMG_5670.JPG
│   ├── IMG_5671.JPG
│   ├── IMG_5672.JPG
│   ├── IMG_5673.JPG
│   ├── IMG_5675.JPG
│   ├── IMG_5679.JPG
│   ├── IMG_5682.JPG
│   ├── IMG_5683.JPG
│   ├── IMG_5684.JPG
│   ├── IMG_5688.JPG
│   ├── IMG_5691.JPG
│   ├── IMG_5692.JPG
│   ├── IMG_5693.JPG
│   ├── IMG_5696.JPG
│   ├── IMG_5697.JPG
│   ├── IMG_5698.JPG
│   ├── IMG_5701.JPG
│   ├── IMG_5706.JPG
│   ├── IMG_5707.JPG
│   ├── IMG_5708.JPG
│   ├── IMG_5709.JPG
│   ├── IMG_5712.JPG
│   ├── IMG_5714.JPG
│   └── IMG_5716.JPG
├── main.js
├── node_modules
│   ├── easyimage
│   ├── grunt
│   ├── grunt-contrib-coffee
│   └── grunt-contrib-watch
├── out
├── package.json
```

## ディレクトリ配下のファイル情報を取得する方法が最初わからずハマった

見出し通りですが、このやり方わからずに、恥ずかしいけどこんな感じのコード書いてました^^;

```javascript
var easyimg = require('easyimage');
var list =["IMG_5670.JPG","IMG_5671.JPG","IMG_5672.JPG","IMG_5673.JPG","IMG_5675.JPG","IMG_5679.JPG","IMG_5682.JPG","IMG_5683.JPG","IMG_5684.JPG","IMG_5688.JPG","IMG_5691.JPG","IMG_5692.JPG","IMG_5693.JPG","IMG_5696.JPG","IMG_5697.JPG","IMG_5698.JPG","IMG_5701.JPG","IMG_5706.JPG","IMG_5707.JPG","IMG_5708.JPG","IMG_5709.JPG","IMG_5712.JPG","IMG_5714.JPG","IMG_5716.JPG"];

for (var i=0;i<list.length;i++){
  easyimg.resize({
  	src:"img/" + list[i],
  	dst:"out/" + list[i],
  	width:800
  }, function(err, image) {
  	if (err) throw err;
  	console.log('Resized ' + image.width + ' x ' + image.height);
  });
}
```

もちろん、これでも動作して目的は果たせたのですが、画像ファイルが増える度に、配列listにそのファイル名を記載するのはイケてないので、Node.jsのfs の使いこなし方を少し調べて以下のようにすればOKっていうのを学びました

```javascript
var easyimg = require('easyimage');
var fs = require('fs'),path = require('path');
var imgPath = path.resolve(__dirname, 'img');
var outPath = path.resolve(__dirname, 'out');

fs.readdir(imgPath, function(err, files){
  if (err) console.log(err);
	var fileList = [];
	files.filter(function(file){
		var target = imgPath + "/" + file;
		var dist = outPath + "/" + file;
		easyimg.resize({
			src:target,
			dst:dist,
			width:800
		}, function(err, image) {
			if (err) throw err;
			console.log('Resized ' + image.width + ' x ' + image.height);
		});

	});

});
```

## 最後に

~~高解像度の画像データをベースにしてiPhone用のアイコンをまとめて出力する処理が今欲しい処理だったりします(^_^;)~~
[Node.jsでiOSのアプリに必要なアイコン画像をまとめて生成する](http://qiita.com/h5y1m141@github/items/239d3f583c673287334f)のが出来た