react native image crop picker 다운로드 -React react native image crop picker 소스 코드 다운로드

react native image crop picker

기타 소스코드

v0.41.5

다운로드

반응 신용 이미지 크로프 프리커

카메라, 비디오, 구성 가능한 압축, 여러 이미지 및 자르기를 지원하는 iOS/Android 이미지 선택기

결과

iOS 싱글 픽 iOS 다중 선택 iOS 자르기 정상 iOS 자르기 원형

중요한 메모

React-Native> = 0.60을 사용하는 경우 React-Native-Image-Crop-Picker 버전을 사용하십시오.> = 0.25.0. 그렇지 않으면 버전 <0.25.0을 사용하십시오.
React-Native-Image-Crop-Picker 버전> = 0.39.0을 사용하려면 Android CompilesDkversion을 33 이상으로 설정해야합니다. 그렇지 않으면 React-Native-Image-Crop-Picker 버전 <0.39.0을 사용하십시오

용법

가져 오기 도서관

 import ImagePicker from 'react-native-image-crop-picker' ;

갤러리에서 선택하십시오

자르기와 함께 단일 이미지 선택기에 전화하십시오

 ImagePicker . openPicker ( {
  width : 300 ,
  height : 400 ,
  cropping : true
} ) . then ( image => {
  console . log ( image ) ;
} ) ;

여러 이미지 선택기를 호출하십시오

 ImagePicker . openPicker ( {
  multiple : true
} ) . then ( images => {
  console . log ( images ) ;
} ) ;

갤러리에서만 비디오를 선택하십시오

 ImagePicker . openPicker ( {
  mediaType : "video" ,
} ) . then ( ( video ) => {
  console . log ( video ) ;
} ) ;

Android : Prop 'Cropping'은 Android의 갤러리에 비디오가 표시되지 않는 것으로 알려져 있습니다. 비디오를 선택할 때 자르기를 참으로 설정하지 마십시오.

카메라에서 선택하십시오

영상

 ImagePicker . openCamera ( {
  width : 300 ,
  height : 400 ,
  cropping : true ,
} ) . then ( image => {
  console . log ( image ) ;
} ) ;

동영상

 ImagePicker . openCamera ( {
  mediaType : 'video' ,
} ) . then ( image => {
  console . log ( image ) ;
} ) ;

작물 사진

 ImagePicker . openCropper ( {
  path : 'my-file-path.jpg' ,
  width : 300 ,
  height : 400
} ) . then ( image => {
  console . log ( image ) ;
} ) ;

선택적 정리

모듈은 향후 어딘가에 자동으로 정리 될 TMP 이미지를 생성하고 있습니다. 청소를 강제로하려면 clean 사용하여 모든 TMP 파일을 청소하거나 cleanSingle(path) 청소하여 단일 TMP 파일을 청소할 수 있습니다.

 ImagePicker . clean ( ) . then ( ( ) => {
  console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
  alert ( e ) ;
} ) ;

요청 객체

재산	유형	설명
자르기	bool (기본 거짓)	자르기를 활성화 또는 비활성화합니다
너비	숫자	`cropping` 옵션과 함께 사용될 때 결과 이미지의 너비
키	숫자	`cropping` 옵션과 함께 사용될 때 결과 이미지 높이
다수의	bool (기본 거짓)	여러 이미지 선택을 활성화 또는 비활성화합니다
writeTempFile (iOS 만)	bool (기본값)	False로 설정하면 선택한 이미지에 대한 임시 파일을 작성하지 않습니다. 이는 `includeBase64` 옵션으로 파일 내용을 검색 할 때 성능을 향상시키는 데 유용하며 디스크에서 파일을 읽을 필요가 없습니다.
Base64 포함	bool (기본 거짓)	true로 설정되면 이미지 파일 컨텐츠는 `data` 속성에서 Base64- 인코딩 된 문자열로 사용할 수 있습니다. 힌트 :이 문자열을 이미지 소스로 사용하려면 <Image source={{uri: `data:${image.mime};base64,${image.data}`}} />
includeexif	bool (기본 거짓)	응답에 이미지 exif 데이터를 포함하십시오
RemomptySpaceAroundImage (iOS 만 해당)	bool (기본값)	True로 설정되면 이미지가 항상 마스크 공간을 채 웁니다.
CropperActiveWidgetColor (Android 만 해당)	문자열 (기본 `"#424242"` )	자르기 이미지는 ActiveWidget 색상을 결정합니다.
CropperstatusBarcolor (Android 만 해당)	문자열 (기본 `#424242` )	자르기 이미지는 상태 바의 색상을 결정합니다.
CropperToolBarcolor (Android 만 해당)	문자열 (기본 `#424242` )	이미지를 자르면 도구 모음의 색상을 결정합니다.
CropperToolbarwidgetColor (Android 만 해당)	문자열 (기본 `darker orange` )	이미지를 자르면 도구 모음 텍스트와 버튼의 색상을 결정합니다.
FreestyLeCropenabled	bool (기본 거짓)	사용자는 자르기에 맞춤 사각형 영역을 적용 할 수 있습니다
CropperToolbartitle	문자열 (기본 `Edit Photo` )	자르기 이미지는 도구 모음의 제목을 결정합니다.
CropperCircleOverlay	bool (기본 거짓)	원형 자르기 마스크를 활성화 또는 비활성화합니다.
DisableCropperColorsetters (Android 만 해당)	bool (기본 거짓)	자르기 이미지는 자르기 라이브러리의 컬러 세터를 비활성화합니다.
Minfiles (iOS 만)	번호 (기본 1)	`multiple` 옵션을 사용할 때 선택할 파일 수
MaxFiles (iOS 만)	번호 (기본 5)	`multiple` 옵션을 사용할 때 선택할 파일의 최대 수
WaitanimationEnd (iOS 만)	bool (기본값)	ViewController `completion` 블록이 호출되면 약속이 해결/거부됩니다
SmartalBums (iOS 만)	배열 (지원되는 값) (기본 [ 'userLibrary', 'Photostream', 'Panoramas', 'Videos', 'Bursts'])))))	선택할 스마트 앨범 목록
usefrontcamera	bool (기본 거짓)	열 때 전면/'셀카'카메라로 기본값 여부. 모든 Android 장치 가이 매개 변수를 처리하는 것은 아닙니다. 이슈 #1058을 참조하십시오.
compressvideopreset (iOS 만)	문자열 (기본 중간 Quality)	비디오 압축에 사용되는 사전 설정을 선택하십시오
compressimagemaxwidth	번호 (기본값 없음)	최대 너비로 이미지를 압축합니다
compressimagemaxheight	번호 (기본값 없음)	최대 높이로 이미지를 압축하십시오
compressimagequality	번호 (기본 1 (Android) /0.8 (iOS))	품질로 이미지를 압축하십시오 (0에서 1까지, 여기서 1은 최고 품질입니다). iOS에서 0.8보다 큰 값은 대부분의 이미지에서 눈에 띄는 품질 증가를 생성하지 않으며 0.8의 값은 파일 크기를 1의 값에 비해 약 절반 이하로 줄입니다.
LoadingLabelText (iOS 만)	문자열 (기본 "처리 자산 ...")	사진이 피커에로드되는 동안 텍스트가 표시됩니다
MediaType	문자열 (기본값)	이미지 선택을 위해 허용 된 MediaType은 '사진', '비디오'또는 'Any'중 하나 일 수 있습니다.
showselectedCount (iOS 만)	bool (기본값)	선택된 자산의 수를 보여줄지 여부
Sortorder (iOS 만)	문자열 (기본 '없음', 지원되는 값 : 'ASC', 'DESC', 'NONE')))	이미지 선택기를 열 때 앨범/세부 사진보기 내에 미디어가 표시되는 방법에 대한 생성 날짜에 정렬 순서를 적용합니다.
ForceJPG (iOS 만)	bool (기본 거짓)	사진을 JPG로 변환할지 여부. 이것은 또한 라이브 사진을 JPG 표현으로 변환합니다.
ShowCropguidelines (Android 만 해당)	bool (기본값)	자르기 동안 이미지 위에 3x3 그리드를 표시할지 여부
showcropframe (Android 만 해당)	bool (기본값)	자르기 동안 작물 프레임을 보여줄지 여부
HidebottomControls (Android 만 해당)	bool (기본 거짓)	하단 컨트롤을 표시할지 여부
enablerotationgesture (Android 만 해당)	bool (기본 거짓)	손 제스처로 이미지를 회전 할 수 있는지 여부
CropperChoosetext (iOS 만)	문자열 (기본 선택)	버튼 텍스트를 선택하십시오
CropperChoosecolor (iOS 만)	문자열 (기본 `#FFCC00` )	선택 버튼의 16 진수 형식 색상. 기본 색상은 ToCropViewController에 의해 제어됩니다.
CropperCancelText (iOS 만)	문자열 (기본 취소)	취소 버튼 텍스트
CropperCancelColor (iOS 만)	문자열 (기본 색조 `iOS` 색상)	취소 버튼의 16 진수 형식 색상. 기본값은 ToCropViewController로 제어되는 기본 색조 iOS 색상입니다.
CropperRotateButtonShidden (iOS 만 해당)	bool (기본 거짓)	Cropper 회전 버튼을 활성화 또는 비활성화합니다

스마트 앨범 유형 (iOS)

참고 : 이러한 유형 중 일부는 모든 iOS 버전에서 사용할 수 없습니다. 문제를 피하기 위해 이것을 확인하십시오.

 ['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']

응답 객체

재산	유형	설명
길	끈	선택된 이미지 위치. `writeTempFile` 옵션이 False로 설정된 경우 NULL입니다.
LocalIndifier (iOS 만)	끈	Phasset 검색에 사용되는 선택된 이미지의 LocalIfnifier
SourceUrl (iOS 만)	끈	선택한 이미지의 소스 경로는 쓰기 액세스가 없습니다
파일 이름	끈	선택한 이미지의 파일 이름
너비	숫자	선택한 이미지 너비
키	숫자	선택된 이미지 높이
몸짓 광대극	끈	선택된 이미지 Mime 유형 (Image/JPEG, Image/PNG)
크기	숫자	바이트의 선택된 이미지 크기
지속	숫자	비디오 지속 시간은 밀리 초입니다
데이터	베이스 64	선택적 Base64 선택된 파일 표현
exif	물체	이미지에서 추출 된 exif 데이터. 응답 형식은 플랫폼 특정입니다
십자점	물체	자른 이미지 사각형 (너비, 높이, X, Y)
CreationDate (iOS 만)	끈	UNIX 타임 스탬프 이미지가 만들어 졌을 때
modificationDate	끈	UNIX 타임 스탬프 이미지가 마지막으로 수정되었을 때

설치하다

1 단계

npm i react-native-image-crop-picker --save

2 단계

iOS

 cd ios
pod install

3 단계

iOS

1 단계

Xcode에서 Open Info.Plist 및 String Key NSPhotoLibraryUsageDescription 을 추가하여 사용자 사진에 액세스 해야하는 이유를 설명합니다. 자세한 정보는 https://forums.developer.apple.com/thread/62229를 참조하십시오. 사용하는 기능에 따라 NSCameraUsageDescription 및 NSMicrophoneUsageDescription 키가 필요할 수도 있습니다.

(선택 사항) 2 단계 - 카메라 / 갤러리 / 작물 텍스트 버튼을 현지화하려면

Xcode 프로젝트를 엽니 다
내비게이션 (왼쪽)에서 프로젝트 이름을 열어 프로젝트 설정으로 이동하십시오.
프로젝트 목록에서 프로젝트를 선택하십시오
정보 탭에 들어가야하고 로컬 로이션을 추가해야합니다. 앱이 누락 된 언어 +
재건하면 이제 추가 된 언어로 클래식 iOS 텍스트가 포함 된 앱 카메라와 갤러리가 있어야합니다.

기계적 인조 인간

build.gradle 의 리포지토리 섹션에 다음 을 추가하고 Android SDK 버전을 33으로 변경하십시오. (Android/Build.Gradle)

 buildscript {
    ext {
        buildToolsVersion = " 31.0.0 "
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        .. .
    }
}

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url " $r ootDir /../node_modules/react-native/android " }

      // ADD THIS
      maven { url ' https://maven.google.com ' }

      // ADD THIS
      maven { url " https://www.jitpack.io " }
    }
}

add useSupportLibrary (Android/app/build.gradle)

 android {
    .. .

    defaultConfig {
        .. .
        vectorDrawables . useSupportLibrary = true
        .. .
    }
    .. .
}

최소 Gradle 버전 RECT-Native-Image-Crop-Picker를 사용하는 경우> = 0.35.0

 3.3.3
3.4.3
3.5.4
3.6.4
4.0.1

자세한 내용은 참조 #1406

SDK 버전> = 33을 사용하는 경우 app/src/main/AndroidManifest.xml 에 팔로우를 추가하십시오.
- <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
[선택 사항] 프로젝트에서 카메라 피커를 사용하려면 app/src/main/AndroidManifest.xml 에 팔로우를 추가하십시오.
- <uses-permission android:name="android.permission.CAMERA"/>
[선택 사항] 전면 카메라를 사용하려면 app/src/main/ AndroidManifest.xml 에 팔로우를 추가하십시오.
- <uses-feature android:name="android.hardware.camera" android:required="false" />
- <uses-feature android:name="android.hardware.camera.front" android:required="false" />