Node.jsで画像のアップロードと画像のリサイズ

Pocket
LINEで送る

Node.jsとExpress4を使ってアップロードした画像をリサイズとBase64化してクライアントに返すサンプルを作ってみました。
画像のアップロードには「multer」、リサイズには「easyimage」を使用します。

まずはパッケージモジュールのインストール。

$ npm install multer easyimage –save

easyimage には ImageMagick が必要なのでインストールします。今回の環境はcentosなのでyumでインストールします。

$ sudo yum -y install ImageMagick
$ sudo yum -y install ImageMagick-devel

※ Macの場合は MacPorts or homebrewでインストールしてください。

画像ファイルを/uploadに送信するように作ります。

まずはViewファイル。formタグで画像のアップロードを書いてます。

  <body>
    <form method="POST" enctype="multipart/form-data", action="/upload">
        <input type="file" name="thumbnail">
        <input type="submit">
    </form>
    <div>
      <img src="{{ img }}">
    </div>
  </body>

次にapp.jsでアップロードするURIに対してmulterを指定します。

var multer = require('multer');

var routes = require('./routes/index');
var users = require('./routes/users');
var upload = require('./routes/upload')
var swig = require('swig');
var app = express();
app.use(multer({ dest: './upload/'}));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', swig.renderFile);
app.set('view engine', 'html');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/upload', upload);

最後にアップロードされたファイルを処理します。

var express = require('express');
var router = express.Router();
var fs = require('fs');
var easyimg = require('easyimage');

router.post('/', function(req, res){

    var tmpPath = req.files.thumbnail.path;
    var targetPath = './upload/' + req.files.thumbnail.originalname;

    // リサイズする画像の情報
    var settingObj = {  format: 'jpg',
                        src: tmpPath,      // リサイズ前の画像
                        dst: targetPath,   // リサイズ後の画像
                        width:100,
                        height:100,
                        fill:true
                    };

    easyimg.resize(settingObj)
           .then(function(image){
                // Base64にエンコード
                encode(image.path, function(err, string){
                    if (err) throw err;

                    // 一時ファイルの削除
                    fs.unlink(tmpPath, function(err){
                        var data = 'data:image/jpg;base64,' + string;
                        res.render('index', {img: data});
                    });
                });
            })
           .then(function(err){
               throw err;
            });
});

// Base64にエンコードするメソッド
var encode = function(filename, callback) {
    var file = fs.readFile(filename, function(err, data) {
        callback(err, new Buffer(data).toString('base64'));
    });
}

module.exports = router;
おすすめ書籍

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください