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