[펌][Node JS] 이미지 업로드 및 리사이즈

---

 [출처]

 : http://blog.jeonghwan.net/이미지-업로드-1-multer-모듈로-파일-업로드/

 : http://blog.jeonghwan.net/이미지-업로드-2-gm-모듈로-이미지-리사이징/

---

이미지 업로드 - 1. multer 모듈로 파일 업로드

이미지 리사이징을 할 때 두 가지 방법을 고려할 수 있다.

  1) 브라우져에서 크롭하여 다양한 이미지 크기를 생성한 뒤 서버에 보내는 방법.
  2) 원본 이미지만 서버로 보내고 서버에서 리사이징을 처리하는 방법이 있다.

전자의 경우 후자에 비에 데이터 전송량이 많아지면서 프로토콜 응답이 느려질 수 있는 성능 상의 이슈가 있다.

본 글에서는 서버로 이미지 데이터를 전송하고,  다음 글에서 이미지 리사이징 처리를 할 수 있는
후자의 방법에 대해 알아보자.

이미지 업로드

웹에서 파일 업로드는 두 가지 방식이 있다.

1. applecation/x-www-urlencoded
2. multipart/form-data

전자의 경우 인코딩으로 인한 성능 이슈가 발생할수 있으니 후자의 방법으로 전송하는 것이 좋다고 한다. (참고)

설치

익스프레스 모듈을 설치하고 필요한 노드 모듈을 설치한다.

express

npm install

업로드 API

이미지 업로드를 위한 프로토콜을 만들어 보자. POST /images 프로토콜을 이용해 이미지를 만들 것이다.
파라메터는 file로 하여 이미지 파일을 업로드 한다. 프로토콜 라우팅을 아래와 같이 구현한다.

var express = require('express');
var router = express.Router();
/* Create new image */
router.post('/', function(req, res, next) {
  res.send('test');
});
module.exports = router;

multer 설치

이미지 등 바이너리 파일 전송을 위해 익스프레스에서는 multer라는 모듈을 제공한다.
Multer는 위에서 설명한 웹 파일 전송방식 중 multipart/form-data 방식을 지원해 주는 익스프레스 미들웨어다.
모듈을 설치하고 프로젝트에 추가하자.

npm install multer --save

업로드 구현

가이드 문서에 보면 간단하게 multer를 해당 라우팅에 삽입하여 사용할 수 있다.
여기서는 몇가지 조건을 추가하자. 

  1) 파일명 파라매터를 추가해서 업로드 경로를 설정할수 있도록 한다.
  2) 업로드 결과 파일명과 확장자를 리턴받는다.

1) 구현을 위해서는 파일 데이터 뿐만 아니라 서버에 저장될 파일 이름도 클라이언트로 부터 받아야 한다.
    filename이라는 파라매터를 추가하자.

router.post('/:filename', function(req, res, next) {
  // ...
});

다음으로 multer 모듈을 래핑한 upload() 함수를 구현하자.

var upload = function (req, res) {
  var deferred = Q.defer();
  var storage = multer.diskStorage({
    // 서버에 저장할 폴더 
    destination: function (req, file, cb) {
      cb(null, imagePath);
    },
    // 서버에 저장할 파일 명
    filename: function (req, file, cb) {
      file.uploadedFile = {
        name: req.params.filename,
        ext: file.mimetype.split('/')[1]
      };
      cb(null, file.uploadedFile.name + '.' + file.uploadedFile.ext);
    }
  });
  var upload = multer({ storage: storage }).single('file');
  upload(req, res, function (err) {
    if (err) deferred.reject();
    else deferred.resolve(req.file.uploadedFile);
  });
  return deferred.promise;
};

라우팅 본문에서 위 업로드 함수를 호출하여 성공하면 파일명과 확장자를 포함한 file객체를 응답한다.
실패시 500 에러와 메세지를 보낸다.

/* Create new image */
router.post('/:filename', function(req, res, next) {
  upload(req, res).then(function (file) {
    res.json(file);
  }, function (err) {
    res.send(500, err);
  });
});

테스트

포스트맨으로 테스트한 결과다. POST /images/badge1프로토콜을 호출하고 저장 경로는 badge1으로 한다.
form-data 에 file 필드에 선택한 파일(배지1.png)을 로등하여 호출한다.
그 결과{name: "badge1", ext: "png"} 객체를 응답받을 수 있다.

다음 글에서는 업로드한 이미지를 서버에서 다양한 크기로 리사이징하는 모듈을 소개한다.

---

이미지 업로드 – 2. gm 모듈로 이미지 리사이징

Multer 모듈로 이미지 업로드에 성공했다면 서버에 업로드된 이미지 파일 경로을 알수 있다.
이번 글에는  gm 모듈을 사용하여 이미지 리사이징 하는 방법에 대해 알아본다.

설치

노드에서 많이 사용하는 이미지 프로세싱 라이브러리 중 하나인 gm을 설치하자.

`$ npm install --save gm`

gm 라이브러리를 사용하기 위해서는 GraphicsMagick 이나  ImageMagick 등의 라이브러리를 추가 설치해야 한다.
GraphicsMagick을 설치한다.

`$ sudo apt-get install graphicsmagick`

섬네일 이미지

라이브러리 사용법은 매우 간단하다.
require('gm')('파일 경로') 를 함수 체인으로 이용하여 이미지 처리를 할 수 있다.
썸네일 이미지를 만들고자 하면 thumb() 함수를 이용한다.

gm('image.jpg')
    .thumb(100, 100, 'imgs/thumb.jpg', function (err) {
      if (err) console.error(err);
      else console.log('done - thumb');
    });

# 메타 데이터 제거

이미지 메타정보(EXIF profile data) 제거시에는 noProfile() 함수를 사용한다.

gm('image.jpg')
    .noProfile()
    .write('noprofile.jpg', function (err) {
      if (err) console.error(err);
      else console.log('done - noprofile');
    });

 

블러 이미지

blur() 함수로 블러 이미지를 생성할 수 있다.

gm('image.jpg')
    .blur(19, 10)
    .write('blur.jpg', function (err) {
      if (err) console.error(err);
      else console.info('done - blur')
    });

리사이징

resize(width, height) 함수로 리사이징 한다. 파라매터로 넘겨주는 width와 height중 이미지 비율을 유지할 수 있는 값으로 width나 height 값을 취하여 리사이징한다. 이것은 thumb()이 이미지를 잘라 내는 것과 다른 점이다.

gm('image.jpg')
  .resize(100, 200)
  .write('100_200.jpg', function (err) {
    if (err) console.error(err)
    else console.log('done')
  });

소스코드: https://github.com/jeonghwan-kim/gm-test

gm-test-master.zip

gm-test-master.zip

0.22MB