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: من المعروف أن الدعامة "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 ) ;
} ) ;| ملكية | يكتب | وصف |
|---|---|---|
| زراعة | منطقي (خطأ افتراضي) | تمكين أو تعطيل المحاصيل |
| عرض | رقم | عرض صورة النتيجة عند استخدامها مع خيار cropping |
| ارتفاع | رقم | ارتفاع صورة النتيجة عند استخدامها مع خيار cropping |
| عديد | منطقي (خطأ افتراضي) | تمكين أو تعطيل اختيار الصور المتعددة |
| WriteTempFile (iOS فقط) | BOOL (صواب افتراضي) | عند التعيين على خطأ ، لا تكتب ملفات مؤقتة للصور المحددة. يعد هذا مفيدًا لتحسين الأداء عند استرداد محتويات الملفات باستخدام خيار includeBase64 ولا تحتاج إلى قراءة الملفات من القرص. |
| تشمل Base64 | منطقي (خطأ افتراضي) | عند التعيين على TRUE ، سيكون محتوى ملف الصورة متاحًا كسلسلة مشفرة BASE64 في خاصية data . تلميح: لاستخدام هذه السلسلة كمصدر للصور ، استخدمها مثل: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| includeexif | منطقي (خطأ افتراضي) | قم بتضمين بيانات EXIF الصورة في الاستجابة |
| تجنب emptyspacearoundImage (iOS فقط) | BOOL (صواب افتراضي) | عند ضبطها على TRUE ، ستملأ الصورة دائمًا مساحة القناع. |
| CropPeractiveWidgetColor (Android فقط) | سلسلة (افتراضي "#424242" ) | عند زراعة الصورة ، يحدد لون ActiveWidget. |
| CropPerstatusBarcolor (Android فقط) | سلسلة (افتراضي #424242 ) | عند زراعة الصورة ، يحدد لون شريط الحالة. |
| CropPertoolbarcolor (Android فقط) | سلسلة (افتراضي #424242 ) | عند زراعة الصورة ، يحدد لون شريط الأدوات. |
| CropPertoolbarwidgetColor (Android فقط) | سلسلة (افتراضي darker orange ) | عند زراعة الصورة ، يحدد لون نص شريط الأدوات والأزرار. |
| FreestyleCropenabled | منطقي (خطأ افتراضي) | يمكّن المستخدم من تطبيق منطقة المستطيل المخصصة للتقاطع |
| CropPertoolbartitle | سلسلة ( Edit Photo افتراضي) | عند زراعة الصورة ، يحدد عنوان شريط الأدوات. |
| CropPercircleOverlay | منطقي (خطأ افتراضي) | تمكين أو تعطيل قناع المحاصيل الدائرية. |
| DisablecropperColorSetters (Android فقط) | منطقي (خطأ افتراضي) | عند زراعة الصورة ، يعطل مستقديات الألوان لمكتبة زراعة المحاصيل. |
| Minfiles (iOS فقط) | الرقم (الافتراضي 1) | دقيقة عدد الملفات التي يجب تحديدها عند استخدام خيار multiple |
| Maxfiles (iOS فقط) | الرقم (الافتراضي 5) | الحد الأقصى لعدد الملفات التي يجب تحديدها عند استخدام خيار multiple |
| WaitanimationEnd (iOS فقط) | BOOL (صواب افتراضي) | سوف يحل/رفض الوعد بمجرد استدعاء كتلة completion ViewController |
| smartalbums (iOS فقط) | Array (القيم المدعومة) (الافتراضي ["userlibrary" ، "Photostream" ، "Panoramas" ، "مقاطع الفيديو" ، "Bursts"]) | قائمة الألبومات الذكية للاختيار من بينها |
| usefrontcamera | منطقي (خطأ افتراضي) | ما إذا كنت ستخلف عن كاميرا الأمامية/"selfie" عند فتحها. يرجى ملاحظة أنه ليس كل أجهزة Android تتعامل مع هذه المعلمة ، راجع المشكلة رقم 1058 |
| CompressVideOpReset (iOS فقط) | سلسلة (متوسطة الافتراضية) | اختر الإعداد المسبق الذي سيتم استخدامه لضغط الفيديو |
| CompressImageMemaxWidth | الرقم (لا شيء افتراضي) | ضغط الصورة بأقصى عرض |
| الضغط | الرقم (لا شيء افتراضي) | ضغط الصورة بأقصى ارتفاع |
| الانضغاط | الرقم (الافتراضي 1 (Android) /0.8 (iOS)) | ضغط الصورة بالجودة (من 0 إلى 1 ، حيث 1 هي أفضل جودة). على iOS ، لا تنتج القيم التي تزيد عن 0.8 زيادة جودة ملحوظة في معظم الصور ، في حين أن قيمة 0.8 ستقلل من حجم الملف بنحو نصف أو أقل مقارنة بقيمة 1. |
| LoadingLabelText (iOS فقط) | سلسلة (افتراضي "معالجة الأصول ...") | يتم عرض النص أثناء تحميل الصورة في منتقي |
| MediaType | سلسلة (افتراضي أي) | يمكن أن تكون MediaType المقبولة لاختيار الصور ، واحدة من: "الصورة" أو "الفيديو" أو "أي" |
| spherectedCount (iOS فقط) | BOOL (صواب افتراضي) | ما إذا كان لإظهار عدد الأصول المحددة |
| sortorder (iOS فقط) | String (افتراضي "لا شيء" ، القيم المدعومة: "ASC" ، "DESC" ، "لا شيء") | يطبق ترتيب فرز في تاريخ الإنشاء على كيفية عرض الوسائط ضمن طرق عرض الصور/التفاصيل عند فتح منتقي الصور |
| ForceJPG (iOS فقط) | منطقي (خطأ افتراضي) | ما إذا كنت لتحويل الصور إلى JPG. سيؤدي هذا أيضًا إلى تحويل أي صورة حية إلى تمثيل JPG الخاص به |
| showcropguidelines (Android فقط) | BOOL (صواب افتراضي) | ما إذا كان يجب إظهار شبكة 3x3 أعلى الصورة أثناء المحاصيل |
| showcropframe (Android فقط) | BOOL (صواب افتراضي) | ما إذا كان لإظهار إطار المحاصيل أثناء زراعة المحاصيل |
| HideBottomControls (Android فقط) | منطقي (خطأ افتراضي) | ما إذا كان لعرض عناصر التحكم في القاع |
| EnablerOtationger (Android فقط) | منطقي (خطأ افتراضي) | سواء لتمكين تدوير الصورة عن طريق لفتة اليد |
| CropPerchoosetext (iOS فقط) | سلسلة (افتراضي اختر) | اختر نص الزر |
| cropperchoosecolor (iOS فقط) | سلسلة (افتراضي #FFCC00 ) | لون تنسيق Hex لزر الاختيار. يتم التحكم في اللون الافتراضي بواسطة TCROPVIEWCONTROLLER. |
| croppercanceltext (iOS فقط) | سلسلة (إلغاء الافتراضي) | إلغاء نص الزر |
| CropPercancelcolor (iOS فقط) | سلسلة (لون Tint iOS الافتراضي) | لون تنسيق Hex لزر إلغاء. القيمة الافتراضية هي اللون الافتراضي TINT iOS الذي يتحكم فيه TCROPVIEWCONTROLLER |
| CropPerrotateButtonshidden (iOS فقط) | منطقي (خطأ افتراضي) | تمكين أو تعطيل الأزرار الدوران |
ملاحظة: قد لا تتوفر بعض هذه الأنواع على جميع إصدارات iOS. تأكد من التحقق من هذا لتجنب المشكلات.
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| ملكية | يكتب | وصف |
|---|---|---|
| طريق | خيط | موقع الصورة المحدد. هذا لا هو فارغ عندما يتم تعيين خيار writeTempFile على خطأ. |
| localidentifier (iOS فقط) | خيط | محدد الصور المحلي ، يستخدم للبحث عن فاسيت |
| Sourceurl (iOS فقط) | خيط | مسار مصدر الصور المحدد ، لا يمكنك الوصول إلى الكتابة |
| اسم الملف | خيط | اسم ملف الصور المحدد |
| عرض | رقم | عرض الصورة المحدد |
| ارتفاع | رقم | ارتفاع الصورة المحدد |
| التمحور | خيط | نوع MIME المحدد (Image/JPEG ، Image/PNG) |
| مقاس | رقم | حجم الصورة المحدد بالبايت |
| مدة | رقم | مدة مدة الفيديو بالمللي ثانية |
| بيانات | BASE64 | تمثيل ملف محدد اختياري BASE64 |
| EXIF | هدف | استخراج بيانات EXIF من الصورة. تنسيق الاستجابة هو منصة محددة |
| croprect | هدف | مستطيل الصورة المزروعة (العرض ، الارتفاع ، x ، ذ) |
| CreationDate (iOS فقط) | خيط | Timestamp UNIX عند إنشاء الصورة |
| تعديل | خيط | Timestamp UNIX عندما تم تعديل الصورة آخر مرة |
npm i react-native-image-crop-picker --save cd ios
pod install في Xcode Open Info.plist وأضف مفتاح السلسلة 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" />هذا المشروع موجود بفضل جميع الأشخاص الذين يساهمون. [يساهم].
شكرا لجميع مؤيدينا! [كن مؤيدًا]
دعم هذا المشروع من خلال أن يصبح راعياً. سيظهر شعارك هنا مع رابط لموقع الويب الخاص بك. [كن راعياً]
معهد ماساتشوستس للتكنولوجيا
