react native image crop picker
v0.41.5
カメラ、ビデオ、構成可能な圧縮、複数の画像、トリミングをサポートするiOS/Android画像ピッカー
インポートライブラリ
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：プロップ「トリミング」は、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 ) ;
} ) ;| 財産 | タイプ | 説明 |
|---|---|---|
| トリミング | ブール（デフォルトのfalse） | トリミングを有効または無効にします |
| 幅 | 番号 | 結果画像の幅croppingオプションで使用した場合 |
| 身長 | 番号 | croppingオプションで使用する場合の結果画像の高さ |
| 複数 | ブール（デフォルトのfalse） | 複数の画像選択を有効または無効にします |
| writeTempfile（iOSのみ） | ブール（デフォルトは真） | falseに設定した場合、選択した画像の一時ファイルを記述しません。これは、 includeBase64オプションを使用してファイルの内容を取得し、ディスクからファイルを読み取る必要がない場合にパフォーマンスを改善するのに役立ちます。 |
| includebase64 | ブール（デフォルトのfalse） | Trueに設定すると、画像ファイルのコンテンツは、 dataプロパティのBase64エンコード文字列として使用できます。ヒント：この文字列<Image source={{uri: `data:${image.mime};base64,${image.data}`}} />画像ソースとして使用するには、次のように使用します。 |
| includeexif | ブール（デフォルトのfalse） | 応答に画像exifデータを含めます |
| emptyspacearoundimage（iOSのみ）を避ける | ブール（デフォルトは真） | Trueに設定すると、画像は常にマスクスペースを埋めます。 |
| cropperactiveWidgetColor（Androidのみ） | 文字列（デフォルト"#424242" ） | 画像を切り取るときは、ActiveWidgetの色を決定します。 |
| cropperstatusbarcolor（Androidのみ） | 文字列（デフォルト#424242 ） | 画像を切り取るときは、StatusBarの色を決定します。 |
| croppertoolbarcolor（Androidのみ） | 文字列（デフォルト#424242 ） | 画像を切り取るときは、ツールバーの色を決定します。 |
| croppertoolbarwidgetcolor（androidのみ） | 文字列（デフォルトdarker orange ） | 画像を切り取るときは、ツールバーのテキストとボタンの色を決定します。 |
| FreestyleCropeNabled | ブール（デフォルトのfalse） | ユーザーは、トリミングにカスタム長方形領域を適用できるようにします |
| croppertoolbartitle | 文字列（デフォルトのEdit Photo ） | 画像のトリミング時に、ツールバーのタイトルを決定します。 |
| CropperCircleOverlay | ブール（デフォルトのfalse） | 円形の収穫マスクを有効または無効にします。 |
| DisableCroppercolorsetters（Androidのみ） | ブール（デフォルトのfalse） | 画像を切り取るときは、ライブラリのトリミング用のカラーセッターを無効にします。 |
| minfiles（iOSのみ） | 番号（デフォルト1） | multipleオプションを使用するときに選択するファイルの最小数 |
| maxfiles（iOSのみ） | 番号（デフォルト5） | multipleオプションを使用するときに選択するファイルの最大数 |
| wateanimationEnd（iOSのみ） | ブール（デフォルトは真） | viewcontroller completionブロックが呼び出されると、約束は解決/拒否されます |
| smartalbums（iOSのみ） | 配列（サポート値）（デフォルト['userlibrary'、 'photostream'、 'panoramas'、 'videos'、 'bursts']）） | 選択するスマートアルバムのリスト |
| usefrontcamera | ブール（デフォルトのfalse） | 開いたときにフロント/「セルフィー」カメラにデフォルトするかどうか。すべてのAndroidデバイスがこのパラメーターを処理するわけではないことに注意してください。問題＃1058を参照してください |
| compressvideopreset（iOSのみ） | 文字列（デフォルトの中級品質） | ビデオ圧縮に使用されるプリセットを選択します |
| Compressimagemaxwidth | 番号（デフォルトなし） | 最大幅で画像を圧縮します |
| Compressimagemaxheight | 番号（デフォルトなし） | 最大高さで画像を圧縮します |
| 圧縮品質 | 番号（デフォルト1（Android）/0.8（iOS）） | 品質のある画像を圧縮します（0から1、1は最高品質です）。 iOSでは、0.8を超える値はほとんどの画像で顕著な品質上昇を生成しませんが、値は0.8の値は、1の値と比較してファイルサイズを約半分以下に減らします。 |
| loadinglabeltext（iOSのみ） | 文字列（デフォルトの「アセットの処理...」） | 写真がピッカーにロードされている間に表示されるテキスト |
| mediatype | 文字列（デフォルトANY） | 画像選択のために受け入れられたメディアタイプは、「写真」、「ビデオ」、または「任意」の1つになる可能性があります。 |
| shosselectedCount（iOSのみ） | ブール（デフォルトは真） | 選択した資産の数を表示するかどうか |
| sortorord（iosのみ） | string（デフォルト「なし」、サポートされている値： 'asc'、 'desc'、 'none'） | 画像ピッカーを開くときに、アルバム/詳細写真ビュー内にメディアがどのように表示されるかについて、作成日にソートオーダーを適用します |
| forcejpg（iOSのみ） | ブール（デフォルトのfalse） | 写真をJPGに変換するかどうか。これにより、ライブ写真がJPG表現に変換されます |
| showcropguidelines（androidのみ） | ブール（デフォルトは真） | トリミング中に画像の上に3x3グリッドを表示するかどうか |
| showcropframe（androidのみ） | ブール（デフォルトは真） | 収穫中に作物フレームを表示するかどうか |
| HideBottomControls（Androidのみ） | ブール（デフォルトのfalse） | 底部コントロールを表示するかどうか |
| EnableRotationgesture（Androidのみ） | ブール（デフォルトのfalse） | ハンドジェスチャーで画像を回転できるかどうか |
| cropperchooseText（iOSのみ） | 文字列（デフォルト選択） | ボタンテキストを選択します |
| cropperchoosecolor（iOSのみ） | 文字列（デフォルト#FFCC00 ） | 選択ボタンの16進形式の色。デフォルトの色は、tocropviewControllerによって制御されます。 |
| CropperCancelText（iOSのみ） | 文字列（デフォルトキャンセル） | ボタンテキストをキャンセルします |
| croppercancelcolor（iOSのみ） | 文字列（デフォルトの色合いのiOS色） | キャンセルボタンの16進形式の色。デフォルト値は、tocropviewControllerによって制御されるデフォルトの色合いのiOSカラーです |
| cropperrotatebuttonshiddiden（iOSのみ） | ブール（デフォルトのfalse） | クロッパー回転ボタンを有効または無効にします |
注：これらのタイプの一部は、すべてのiOSバージョンで使用できない場合があります。問題を避けるためにこれを確認してください。
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| 財産 | タイプ | 説明 |
|---|---|---|
| パス | 弦 | 選択した画像の場所。これは、 writeTempFileオプションがfalseに設定されている場合にヌルです。 |
| Localidentifier（iOSのみ） | 弦 | Phasset Searchingに使用される選択された画像 'Localidentifier |
| sourceurl（iOSのみ） | 弦 | 選択した画像のソースパス、書き込みアクセスがありません |
| ファイル名 | 弦 | 選択した画像 'ファイル名 |
| 幅 | 番号 | 選択された画像幅 |
| 身長 | 番号 | 選択した画像の高さ |
| マイム | 弦 | 選択された画像マイムタイプ（画像/jpeg、画像/png） |
| サイズ | 番号 | バイト単位で選択された画像サイズ |
| 間隔 | 番号 | ミリ秒単位のビデオ期間 |
| データ | base64 | オプションのbase64選択されたファイル表現 |
| exif | 物体 | 画像から抽出されたexifデータ。応答形式はプラットフォーム固有です |
| croprect | 物体 | クロップド画像長方形（幅、高さ、x、y） |
| CreationDate（iOSのみ） | 弦 | 画像が作成されたときのUnixタイムスタンプ |
| 修正date | 弦 | 画像が最後に変更されたときのUnixタイムスタンプ |
npm i react-native-image-crop-picker --save cd ios
pod install xcodeを開いて情報を開き、文字列key NSPhotoLibraryUsageDescriptionを追加して、ユーザー写真にアクセスする必要がある理由を説明します。詳細については、https：//forums.developer.apple.com/thread/62229をご覧ください。使用する機能に応じて、 NSCameraUsageDescriptionとNSMicrophoneUsageDescriptionキーが必要になる場合があります。
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 " }
}
}useSupportLibrary （android/app/build.gradle）を追加 android {
.. .
defaultConfig {
.. .
vectorDrawables . useSupportLibrary = true
.. .
}
.. .
} 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" />このプロジェクトは、貢献するすべての人々のおかげで存在します。 [貢献する]。
すべての支援者に感謝します！ [支援者になる]
スポンサーになることにより、このプロジェクトをサポートします。あなたのロゴは、あなたのウェブサイトへのリンクでここに表示されます。 [スポンサーになる]
mit
