Sharp 모듈 활용한 이미지 리사이징, 파일 포맷 변경

목표

• Resize Image with Sharp
  • image resize+crop, 확장자 변경
  • 설치와 적용
  • 테스트

Resize Image with Sharp

image resize+crop, 확장자 변경

sharp(input)
	.resize({ width: 512, height: 512, fit: 'cover' })
	.toBuffer()
	.then((data) => {
		// ... do something with data
	});

학습메모 3을 참고하여 위와 같은 로직을 넣기로 했다.

fit 속성은 참고로 위와 같은 옵션이 있다.
본 프로젝트에선 cover가 적절.

const sharp = require('sharp');

(async () => {
	const image = await sharp('./my-image.jpg')
		.resize(500, 500, { fit: 'contain' }) // fit : contain 가로 세로 비율을 강제 유지
		.withMetadata() // 원본 이미지의 메타데이터 포함
		.toFormat('jpeg', { quality: 100 }) // 포맷, 퀄리티 지정
		.toFile('resizeIMG.jpeg', (err, info) => {
			// 리사이징된 이미지를 로컬에 저장
			console.log(`리사이징 이미지 info : ${JSON.stringify(info, null, 2)}`);
		})
		.toBuffer(); // 리사이징된 이미지를 노드에서 읽을수 있게 buffer로 변환
})();

포맷 변경은 위와 같이 할 수 있다. 우리는 png로 저장해준다.

설치와 적용

yarn workspace server add sharp @types/sharp

async uploadFile(file: Express.Multer.File): Promise<Image> {
  if (!file.mimetype.includes('image')) {
    throw new BadRequestException('Only image files are allowed');
  }

  const { mimetype, buffer, size } = file;

  const resized_buffer = await sharp(buffer)
    .resize(500, 500, { fit: 'cover' })
    .toFormat('png', { quality: 100 })
    .toBuffer();

  const filename = uuid();

  // NCP Object Storage 업로드
  AWS.config.update(awsConfig);
  const result = await new AWS.S3()
    .putObject({
      Bucket: bucketName,
      Key: filename,
      Body: resized_buffer,
      ACL: 'public-read',
    })
    .promise();
  Logger.log('uploadFile result:', result);

  const updatedImage = await this.imageRepository.save({
    mimetype,
    filename,
    size,
  });

  return updatedImage;
}

테스트 + 결과 화면

원본 파일이 2730 x 1636인 JPG 이미지로 테스트해본다.

잘 업로드되는 것을 확인할 수 있다.

Object Storage에 잘 추가된 것도 확인할 수 있다.

파일 용량이 아주 많이 줄었다! (377kB -> 70.8kB)

다운받아 .png 확장자를 붙여서 열어보면,
PNG 이미지에, 규격도 500 x 500으로 변경된 것을 확인할 수 있다.

대 성 공!

학습메모

Sharp

1. NestJS: Creating a pipe to optimize uploaded images
2. Sharp 모듈 사용법 - 이미지 리사이징 / 워터마크 넣기
3. How do I resize an image into a perfect square using sharp in nodejs?
4. sharp api object-fit style