Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前置き的な話

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

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

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

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

利用するための準備

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

imagemagickのインストール

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

brew install imagemagick

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

easyimageのインストール

npm init
npm install easyimage --save-dev

という感じでインストールしました。CoffeeScriptで書こうと思ったので一応

npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-coffee --save-dev

とかもしたので最終的にpackage.jsonはこのようになりました。(ただCoffeeScript使わず、素の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に変換元画像を置いたので、こんな感じになりました。

.
├── 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

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

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

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っていうのを学びました

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のアプリに必要なアイコン画像をまとめて生成するのが出来た

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした