[REACT NATIVE] 이미지 용량 줄이기 (react-native-image-resizer)

react native 에서 image picker로 이미지를 선택 후 그냥 업로드 하면 이미지의 용량이 너무 큰 문제가 있다. 이미지 하나에 몇 MB 이다보니 몇 개만 저장해도 한도를 금방 넘게된다.

이런저런 라이브러리를 많이 만드는 bamlab에서 지원해주는 image resizer 라는 라이브러리를 쓰면 쉽게 이미지 용량을 줄일 수 있다.

https://github.com/bamlab/react-native-image-resizer

  const resizedImage = await ImageResizer.createResizedImage(
    uri, // path
    300, // width
    300, // height
    'JPEG', // format
    100, // quality
    undefined, // rotation
    uploadFileName, // outputPath
    undefined, // keepMeta,
    undefined, // options => object
  );

어색한 점은 값들이 하나의 Object로 들어가는게 아니라 그냥 각각 들어간다는 것이다. {uri, width, height ... } 이런식으로 들어갔으면 편했을텐데.

먼저 image picker로 가져온 이미지의 path를 그대로 첫번째 변수로 넣어주고, outputPath에 원하는 이름을 적어서 받아오면 된다.

뒤에 then을 쓰거나 위 처럼 async/await 를 통해 값은 return 할 수 있다.

현재 프로젝트에서 firebase storage를 쓰고 있는데 용량도 KB 단위로 줄고, 그에 따라 업로드 속도도 매우 빠르게 업로드 된다. 여러 장을 한꺼번에 업로드해도 매우 빠른 속도로 업로드가 가능하다.

react native 에서 이미지 업로드 속도 때문에 고민이라면 react-native-image-resizer를 사용해서 해결해보도록 하자