티스토리 뷰

sharp 를 사용해서 이미지를 리사이즈 할시 모바일에서 찍은 사진들이 90도 돌아가는 경우가 발생합니다.

이미지가 리사이즈되면서 이미지의 메타데이터를 기억하지 못해 발생하는 문제인데, 해결방법이 2가지가 있습니다.

 

첫번째 방법으로, .withMetadata() 함수를 사용해서 원본 이미지에 메타 데이터를 넣어주는 방법입니다.

const image = sharp(data)
  .withMetadata()
  .resize(width, height)
  .toBuffer()

두번째 방법으로, .rotate() 를 resize 전에 넣는 방법이 있습니다.

rotate 의 각도를 제공하지 않으면 EXIF 데이터(메타 데이터)에서 결정됩니다.

const image = sharp(buff);
const webpBuffer = await image
  .rotate()
  .resize()
  .webp({ 90 })
  .toBuffer();
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함