문제
이미지 업로드 시 버킷에 업로드된 이미지의 너비와 높이가 데이터베이스에 저장한 이미지 객체의 너비와 높이와 일치하지 않음.
/**
기존 구조
1. `sharpInstance` 생성
2. `sharpInstance.rotate()`
3. 버킷에 이미지 업로드
4. `metadata.width`, `metadata.height` 를 `DB` 에 저장
*/
const sharpInstance = sharp(buffer);
sharpInstance.rotate();
const metadata = await sharpInstance.metadata();
const image = {
// ...
width: metadata.width,
height: metadata.height,
}
bucket.upload(buffer);
database.save(image);
- 이미지 처리는 sharp 라이브러리를 사용함.
- 대략 위와 같은 구조로 버킷에 업로드, 이미지 정보를 데이터베이스에 저장함.
- 데이터베이스에 저장된 width, height 의 값이 원본 이미지와 맞지 않는 문제가 있음.
해결 과정
1
- 원본 이미지의
width
,height
를image
객체에 할당하기 전에sharp.roate()
사용하는데 이 함수가 작동하지 않을까 생각함. - 인자를 주지 않으면
exif.orientation
을 보고auto-rotated
된다고 알고 있어서 문제가 없지 않을까 해서auto-rotate
를 확인했는데 함수의 문제가 아닌 것 같음.
2
- 문서 설명을 다시 보니 이렇게 적혀있음.
"Rotate the output image by either an explicit angle or auto-orient based on the EXIF Orientation tag." - 즉, 기존 코드에서 사용하는
width
,height
는 그전에rotate
를 하더라도roated
된 이미지의width
,height
가 아니라 원본 이미지의width
,height
를 쓰고 있었음.
결론
width, height 를 이미지 업로드보다 먼저 사용해야 해서 직접 orientation을 보고 width, height를 사용하도록 수정
- orientation 이 5~8일 때 width, height 를 뒤집어주면 됨.
const metadata = await sharpInstance.metadata();
const getNormalSize = (
width: number,
height: number,
orientation?: number,
): { width: number; height: number } => {
return orientation && orientation >= 5
? { width: height, height: width }
: { width, height };
};
const width = getNormalSize(metadata.width, metadata.heigth, metadata.orientation);
const height = getNormalSize(metadata.width, metadata.heigth, metadata.orientation);
const image = {
// ...
width,
height,
}
bucket.upload(buffer);
database.save(image);
반응형
'JavaScript & TypeScript' 카테고리의 다른 글
JS RegExp perfomance (0) | 2022.09.24 |
---|---|
fastify-multipart handle multiple file streams and fields in TypeScript (2) | 2022.09.22 |
브라우저, JS 흐름 정리 메모 (2) | 2022.05.22 |
Udemy 클린코드 JS 강의 정리 (1) | 2022.01.06 |
Next export 시 Image Optimization 설정 문제 (3) | 2022.01.03 |