[node.js] sharp를 이용한 이미지 리사이징 시 width 와 height의 역전

내가 원하는 사이즈로 이미지를 리사이징 하려고 하는데, 적용이 되지 않았다.

무엇이 문제인지 여러 가지 찾아보고, sharp에서 나와 같은 이슈를 겪은 사람이 해결했던 방법이 있었고, 왜 width, height가 역전이 되는지도 알게 되었다.

이 글은 역전된 이유를 설명하고, 해결했던 방법을 기록하기 위한 글입니다.

sharp의 사용법은 다른 블로그들이 너무 잘 작성해 줘서 오히려 그 부분을 참고하는 것을 추천합니다.

 

---

이미지에는 우리가 생각하지 못한 많은 정보들이 담겨있습니다.

이미지를 전달할 때, 바이너리 형태로 전달하기 위해서 변환을 하는데, 이때 metadata 정보들도 전달이 된다.

그중 EXIF(Exchangeable image file format)는 이미지에 대한 추가 정보를 담고 있는 표준 형식입니다. 이 정보는 주로 카메라의 제조사, 모델, 촬영 일시, 촬영 조건, 해상도 등과 같은 다양한 메타데이터를 포함합니다. EXIF는 이미지의 내용 이외에도 촬영과 관련된 다양한 정보를 기록하여 나중에 이미지를 보거나 편집할 때 유용하게 사용됩니다.

 

여기서, EXIF에 저장된 데이터들이 우리가 변환하려는 사이즈에 영향을 줄 수 있다.

나 같은 경우 1200:900(4:3)으로 변경을 원했지만, 900:1200으로 이미지가 업로드되는 경우들이 발생했고, 구글링을 하면서 알게 된 점은 EXIF의 데이터가 내가 변경하려는 이미지의 크기를 바꾸는데 영향을 준다는 것을 확인할 수 있었다.

 

그러면, 어떻게 해결해야 할까?

Sharp에서 제공하는 내장 메서드 중에 rotate라는 것이 있는데, 해당 메서드는 90도 180도로 이미지를 변경하는 메서드이지만

값을 넣지 않은 상태로 sharp에서 사용을 하게 되면, width와 height의 사이즈를 변경할 수 있다.

const imageResize = await sharp(image)
  .rotate()
  .resize({ width: 1200, height: 900, fit: 'contain' })
  .toBuffer();

 

 

---

이미지에는 내가 생각하는 것보다 더 많은 데이터를 가지고 있다는 것을 알게 된 계기가 됐다.

너무 당연하게 생각하지 말고 다시 한번 확인하고 이해하고 넘어가는 습관을 가질 필요가 있다고 본다.

---

24-03-14 추가 된 부분

해당 코드를 사용했을 경우 이미지의 사이즈를 적용은 할 수 있었으나 metadata때문인지 이미지가 회전하는 경우도 발생했다.

수정된 코드로 재배포하였다.

const imageResize = await sharp(image)
  .rotate(null)
  .resize({ width: 1200, height: 900, fit: 'contain' })
  .toBuffer();

 

검색하며 찾아보고 작성 한글입니다. 혹시라도 부정확한 정보를 전달드릴수 있습니다. 틀린 부분이 있으면 댓글을 남겨주세요.

 

Ref.

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

sharp

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-Sharp-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95-%EC%9B%8C%ED%84%B0%EB%A7%88%ED%81%AC-%EB%84%A3%EA%B8%B0

[NODE] 📚 Sharp 모듈 사용법 - 이미지 리사이징 / 워터마크 넣기

https://sharp.pixelplumbing.com/api-operation#rotate

sharp - High performance Node.js image processing

https://github.com/lovell/sharp/issues/3537

Quick Help: Sharp resize function is not working related with the width and height · Issue #3537 · lovell/sharp