경고 버전 3.0.0부터 이 라이브러리는
react-native-image-resizer
에서@bam.tech/react-native-image-resizer
로 이동되었습니다.
버전 3.0.0
부터 이 패키지는 새로운 아키텍처(Turbo 모듈)를 지원합니다. 또한 이전 버전과의 역호환성도 갖추고 있습니다.
yarn add @bam.tech/react-native-image-resizer
cd ios && pod install
yarn add [email protected]
cd ios && pod install
참고: 최신 버전의 React Native에서는 Android에서 Gradle을 빌드하는 동안 오류가 발생할 수 있습니다( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim
). 이 문제를 해결하려면 cd android && ./gradlew clean
실행하세요.
Android용 수동 링크 정보: 링크
import ImageResizer from '@bam.tech/react-native-image-resizer' ;
ImageResizer . createResizedImage (
path ,
maxWidth ,
maxHeight ,
compressFormat ,
quality ,
rotation ,
outputPath
)
. then ( ( response ) => {
// response.uri is the URI of the new image that can now be displayed, uploaded...
// response.path is the path of the new image
// response.name is the name of the new image with the extension
// response.size is the size of the new image
} )
. catch ( ( err ) => {
// Oops, something went wrong. Check that the filename is correct and
// inspect err to get more details.
} ) ;
기본 샘플 앱은 example
폴더에서 사용할 수 있습니다. 모듈을 사용하여 카메라 롤에서 사진의 크기를 조정합니다.
createResizedImage (
/**
* uri parameter accepts`path` or `uri`.
* This property has been tested with the output of @bam.tech/react-native-image-picker,
* react-native-vision-camera, @react-native-camera-roll/camera-roll and http link
**/
uri ,
maxWidth ,
maxHeight ,
compressFormat ,
quality ,
( rotation = 0 ) ,
outputPath ,
( keepMeta = false ) ,
( options = { } )
) ; // Returns a Promise
Promise는 새 파일의 path
, uri
, name
, size
(바이트), width
(픽셀) 및 height
포함하는 객체로 확인됩니다. URI는 <Image>
구성 요소의 source
로 직접 사용될 수 있습니다.
옵션 | 설명 |
---|---|
길 | 이미지 파일의 경로 또는 'data:image/imagetype'이라는 접두사가 붙은 base64 인코딩 이미지 문자열(여기서 imagetype 은 jpeg 또는 png임) |
너비 | 크기를 조정할 너비(자세한 내용은 mode 참조) |
키 | 크기를 조정할 높이(자세한 내용은 mode 참조) |
압축 형식 | JPEG, PNG 또는 WEBP(Android만 해당)일 수 있습니다. |
품질 | 0에서 100 사이의 숫자입니다. JPEG 압축에 사용됩니다. |
회전 | Android의 경우 이미지에 적용할 회전(도)입니다. iOS에서는 회전이 90도의 배수로 제한됩니다(반올림). |
출력 경로 | 크기가 조정된 이미지 경로입니다. null인 경우 크기가 조정된 이미지가 캐시 폴더에 저장됩니다. outputPath를 설정하려면 회전 옵션도 추가해야 합니다(회전이 필요하지 않은 경우 0으로 설정하면 됩니다). |
킵메타 | true 인 경우 크기 조정 시 원본 이미지에 대한 회전 수정도 수행하므로 방향 값을 제외한 모든 파일 메타데이터/exif 정보를 보존하려고 시도합니다. 기본값은 false 입니다. 이는 모든 메타데이터가 손실됨을 의미합니다. 참고: 이는 웹이 아닌 파일 시스템에서 로드된 JPEG 이미지에만 true 됩니다. |
옵션.모드 | 반응 네이티브 이미지의 resizeMode와 유사합니다: contain (기본값), cover 또는 stretch 중 하나입니다. contain 비율을 유지하면서 이미지를 width 와 height 에 맞춥니다. cover 종횡비를 유지하고 이미지의 너비가 최소한 width 또는 height 인지 확인합니다. stretch 이미지의 크기를 정확히 width 와 height 로 조정합니다. |
options.onlyScaleDown | true 인 경우 이미지는 확대되지 않고 작게만 표시됩니다. |
@react-native-camera-roll/camera-roll
을 사용하는 경우 이 라이브러리는 작동하지 않습니다 . <Image />
사용하여 라이브러리의 uri
로 이미지를 표시하려고 하면 다음과 같은 오류가 발생합니다: No suitable image URL loader found for ph://...
. 이 오류는 현재 우리가 사용하고 있는 ReactNative ImageLoader
에서 발생합니다. 이 문제를 해결하기 위한 도움/홍보를 환영합니다. 그때까지는 react-native-image-picker
사용하는 것이 좋습니다.우리는 Lean & Agile 방법론을 사용하여 React Native로 멀티 플랫폼 애플리케이션을 개발하고 설계하는 100명의 직원을 보유한 회사입니다. 귀하의 필요에 맞는 솔루션에 대한 자세한 정보를 얻으려면 이메일이나 문의 양식을 통해 언제든지 문의하세요!
언제나 즐거운 마음으로 답변해드리겠습니다.