react-native image resizer 하기

이미지를 그대로 올릴 경우 용량이 큰 경우가 있기 때문에 이미지를 리사이즈를 해줘야 하는 경우가 생깁니다.

react native에서는 다행히 쉽게 이미지 용량을 줄일수 있도록 라이브러리가 제공되고 있습니다.

그중에서 bamlab에서 제공해주는 react-native-image-resizer를 이용했습니다.

설정

yarn add @bam.tech/react-native-image-resizer
cd ios && pod install

안드로이드에서 빌드 에러가 날 경우 아래 코드를 실행합니다.

cd android && ./gradlew clean

설명

createResizedImage API는 아래와 같이 제공됩니다.

createResizedImage(
  path, //이미지 파일의 경로 또는 base64 인코딩된 이미지 문자열
  maxWidth,
  maxHeight,
  compressFormat, //JPEG, PNG or WEBP 
  quality, //0~100 화질 설정
  (rotation = 0), // iOS에서 회전은 90도의 배수로 제한
  outputPath,
  (keepMeta = false), //파일 메타데이터/exif 정보를 보존하는 역할 기본 값은 false
  (options = {})
); // Returns a Promise

createResizedImage를 사용하여 간편하게 이미지 용량을 줄일 수 있지만 파라미터가 위에 순서대로 들어가게 써야하다보니 조금(?) 의외였습니다.

예제코드

const resizeImage = async (image) => {
  const resizerImage = await ImageResizer.createResizedImage (
    image.local.key,
    360,
    360,
    'JPEG',
    70,
    0,
    null,
    false,
    { onlyScaleDown: true },
  );
  
  return resizerImage;
};

react-native-image-resizer를 통해서 이미지 업로드에서 있어서 속도나 용량 문제를 쉽게 해결할 수 있었습니다.