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;
おすすめ書籍
