리액트 네이티브 이미지 첨부하기 (카메라, 갤러리)

리액트 네이티브 이미지 첨부

리액트 네이티브에서 이미지 첨부 기능을 이용하기 위해서는 2가지 방법이 있다.

• 카메라 모듈을 사용하여 즉시 찍어 올리기
• 갤러리에 저장된 이미지를 첨부하여 올리기

설치해야 하는 패키지

• react-native-image-crop-picker 패키지를 통해 두 방식 모두 이용할 수 있다.
• 이미지 리사이즈를 위해 react-native-image-resizer 도 반드시 깔아주는 것이 좋다.

이미지 리사이즈 등 압축을 해주지 않으면, 요즘 스마트폰 카메라 기본 화질이 매우 좋아서 이미지 크기 자체가 매우매우 크기 때문에 서버에 큰 부담이 된다.

사용 방법

이미지 찍어 올리기

import ImageResizer from "react-native-image-resizer";
import ImagePicker from "react-native-image-crop-picker";

const onResponse = useCallback(async (response) => {
  console.log(response.width, response.height, response.exif);
  // mime 은 JPG/PNG 와 같은 타입을 말한다.
  // base64 는 Image 를 Text 로 변환시킬 때 사용된다.
  //   -> 이미지 데이터의 2진수를 글자로 매칭시켜서 표현하는 것이다.
  // exif 는 휴대폰을 어떤 방향으로 들고 사진을 찍었는지에 대한 정보를 말한다.
  setPreview({ uri: `data:${response.mime};base64,${response.data}` });
  const orientation = (response.exif as any)?.Orientation;
  console.log("orientation", orientation);

  // 이미지를 정사각형에 맞게 줄여준다.
  return ImageResizer.createResizedImage(
    response.path,
    600,
    600,
    response.mime.includes("jpeg") ? "JPEG" : "PNG",
    100, // 퀄리티를 줄일수록 용량도 줄어든다.
    0
  ).then((r) => {
    console.log(r.uri, r.name);

    setImage({
      uri: r.uri,
      name: r.name,
      type: response.mime,
    });
  });
}, []);

const onTakePhoto = useCallback(() => {
  return ImagePicker.openCamera({
    includeBase64: true,
    // 카메라를 어떤 방향으로 들고 찍었냐에 따른 숫자 표시를 해줌
    includeExif: true,
  })
    .then(onResponse)
    .catch(console.log);
}, [onResponse]);

• .openCamera() 메서드를 통해 처리가 가능하다.
• 처리 콜백에 사용된 onResponse 에서의 base64 는 Image 를 Base64 인코딩으로 컨버트해서 올리기 위해 작성한 것이다.
• 이미지의 용량이 너무 커지지 않기 위해 ImageResizer 를 통해 적당한 크기와 압축형식으로 이미지를 리사이징해주자.
  • 이미지 퀄리티를 줄일수록 이미지의 크기는 줄어든다.

갤러리의 이미지 올리기

import ImageResizer from "react-native-image-resizer";
import ImagePicker from "react-native-image-crop-picker";

const onResponse = useCallback(async (response) => {
  console.log(response.width, response.height, response.exif);
  // mime 은 JPG/PNG 와 같은 타입을 말한다.
  // base64 는 Image 를 Text 로 변환시킬 때 사용된다.
  //   -> 이미지 데이터의 2진수를 글자로 매칭시켜서 표현하는 것이다.
  // exif 는 휴대폰을 어떤 방향으로 들고 사진을 찍었는지에 대한 정보를 말한다.
  setPreview({ uri: `data:${response.mime};base64,${response.data}` });
  const orientation = (response.exif as any)?.Orientation;
  console.log("orientation", orientation);

  // 이미지를 정사각형에 맞게 줄여준다.
  return ImageResizer.createResizedImage(
    response.path,
    600,
    600,
    response.mime.includes("jpeg") ? "JPEG" : "PNG",
    100, // 퀄리티를 줄일수록 용량도 줄어든다.
    0
  ).then((r) => {
    console.log(r.uri, r.name);

    setImage({
      uri: r.uri,
      name: r.name,
      type: response.mime,
    });
  });
}, []);

const onChangeFile = useCallback(() => {
  // 갤러리 사진 사용하기
  return ImagePicker.openPicker({
    includeExif: true,
    includeBase64: true,
    mediaType: "photo",
  })
    .then(onResponse)
    .catch(console.log);
}, [onResponse]);

• openPicker() 메서드를 통해 처리 가능하다.

레퍼런스

제로초 배달앱 클론코딩 [with React Native]