기본 API인 ImageEditor.cropImage 로 resizing까지 하기

이미지 resize를 위해 3rd-party 모듈인 react-native-image-resizer를 써오고 있다가 RN의 기본 API인 ImageEditor.cropImage로도 resizing이 된다는 사실을 오늘 알았습니다. :smile: 공식 doc에 자세한 설명이 없어서 공유해봅니다.

다음 예는 이미지의 상단을 정사각형으로 crop하고 2048x2048 사이즈로 리사이징하는 코드입니다.

ImageEditor.cropImage(
  data.path, 
  {
    offset:{x:0,y:0},  // crop 시작 위치
    size:{width:imageWidth, height:imageWidth}, // offset에서 시작하는 crop 영역 pixel단위
    // displaySize와 resizeMode는 위에서 지장한 데로 crop한 이미지를 resizing해서 받고 싶을때 넣는 옵셥
    displaySize:{width:2048, height:2048}, 
    resizeMode: 'contain', // 'cover', 'contain', 'stretch', 'repeat', 'center' 
  },
  (uri) => {
    // imagestore의 uri가 떨어짐 rct-image-store://2
    // <Image source={{uri:xxxx}}/> 형태로 바로 넣어서 사용
  }, 
  (error) =>{
    console.log('cropImage,',error)
  }
);

더 나은 방법을 알고 계신 분들은 공유해주세요.

3개의 좋아요