Express 이미지 처리

업로드 구조

Client image upload -> Express -> S3 업로드 방식으로 되어있고

업로드 이후 CloudFront도메인 url을 Client에 보내주는 방식으로 되어있다

문제점

1. Client의 상세화면 페이지의 width가 775px로 되어있는 상태이기 때문에
   바로 업로드 할시 불필요한 자원이 낭비되는 경우가 발생

2. image를 업로드하는 프로세스를 타는 경우는 글을 올릴 때, 프로필 사진 변경 할때 이다, 이때도 마찬가지로 프로필 사진은 사이즈가 크지 않아도 되기 때문에 불필요한 자원이 낭비된다

해결방안

sharp를 이용해서 이미지 resize를 처리하려 한다

1. multer를 이용해 서버에 저장된 이미지파일을 불러온다

fs.readFileSync(`image/${filename}`);

2. sharp를 이용해 이미지 파일의 metadata를 가져온다

const metadata = await sharp(imageFile).metadata();
const { width } = metadata;

메타데이터의 구조

{
  format: 'png',
  size: 8702,
  width: 224,
  height: 100,
  space: 'srgb',
  channels: 4,
  depth: 'uchar',
  density: 144,
  isProgressive: false,
  hasProfile: true,
  hasAlpha: true,
  exif: <Buffer 4d 4d 00 2a 00 00 00 08 00 04 01 1a 00 05 00 00 00 01 00 00 00 3e 01 1b 00 05 00 00 00 01 00 00 00 46 01 28 00 03 00 00 00 01 00 02 00 00 87 69 00 04 ... 88 more bytes>,
  icc: <Buffer 00 00 0f f8 61 70 70 6c 02 10 00 00 6d 6e 74 72 52 47 42 20 58 59 5a 20 07 e5 00 01 00 0a 00 01 00 1d 00 37 61 63 73 70 41 50 50 4c 00 00 00 00 41 50 ... 4038 more bytes>,
  xmp: <Buffer 3c 78 3a 78 6d 70 6d 65 74 61 20 78 6d 6c 6e 73 3a 78 3d 22 61 64 6f 62 65 3a 6e 73 3a 6d 65 74 61 2f 22 20 78 3a 78 6d 70 74 6b 3d 22 58 4d 50 20 43 ... 398 more bytes>
}

이런식으로 mimetype과 이미지에 대한 정보를 담고 있다

이후 width와 image type(글, 프로필 사진)을 이용해 resize를 진행

테스트로 바로 리사이즈는 해봤고

리사이즈가 성공적으로 되었다

조건문을 통해 max-width를 설정해준다

if (width > 775) {
	uploadFile = await sharp(imageFile).resize(775).toBuffer();
}

난 쿠키런 유저니까

참고로 밑에있는 이미지의 사이즈는 규격이 1440 * 682이다

성공적

이제 프로필사진을 업데이트하는지 글에 사용될 이미지인지 확인만해서 S3에 올려주면 된다

Reference
npm sharp: https://www.npmjs.com/package/sharp