الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

@React-Native-Community/Image-Editor

وحدة محرر الصور الأصلي لـ React Native.

تم استخلاصها في الأصل من React Native issue#23313 وصيانتها من قبل المجتمع.

ابدء

ثَبَّتَ 

yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save

تثبيت القرون 

npx pod-install

الاستخدام

ابدأ باستيراد المكتبة: 

 import ImageEditor from '@react-native-community/image-editor' ;

صورة المحاصيل

اقتصاص الصورة المحددة بواسطة uri param. إذا أشار URI إلى صورة عن بعد ، فسيتم تنزيله تلقائيًا. إذا تعذر تحميل/تنزيل الصورة ، فسيتم رفض الوعد.

إذا نجحت عملية زراعة المحاصيل ، فسيتم تخزين الصورة المحصوفة الناتجة في مسار ذاكرة التخزين المؤقت ، وستشير CropResult في الوعد إلى الصورة في مسار ذاكرة التخزين المؤقت. ️ تذكر حذف الصورة التي تم اقتصاصها من مسار ذاكرة التخزين المؤقت عند الانتهاء من ذلك. 

 ImageEditor . cropImage ( uri , cropData ) . then ( ( result ) => {
  console . log ( 'Cropped image uri:' , result . uri ) ;
} ) ;

cropData: ImageCropData

اسم يكتب وصف
offset { x: number, y: number } الزاوية العلوية اليسرى من الصورة المزروعة ، المحددة في مساحة إحداثيات الصورة الأصلية
size { width: number, height: number } حجم (أبعاد) الصورة المزروعة
displaySize
(خياري)		 { width: number, height: number } الحجم الذي تريد توسيع نطاق الصورة المزروعة
resizeMode
(خياري)		 'contain' | 'cover' | 'stretch' | 'center' وضع تغيير حجمه للاستخدام عند تحجيم الصورة (iOS فقط ، يكون وضع تغيير حجم Android دائمًا 'cover' ، ويب - لا دعم)
القيمة الافتراضية : 'cover'
quality
(خياري)		 number قيمة في النطاق 0.0 - 1.0 تحديد مستوى ضغط صورة النتيجة. 1 يعني عدم وجود ضغط (أعلى جودة) و 0 أعلى ضغط (أدنى جودة)
القيمة الافتراضية : 0.9
format
(خياري)		 'jpeg' | 'png' | 'webp' تنسيق الصورة الناتجة.
القيمة الافتراضية : بناءً على الصورة المقدمة ؛
إذا لم يكن تحديد القيمة ممكنًا ، فسيتم استخدام 'jpeg' كاحتفال.
'webp' لا يتم دعمه بواسطة iOS.
includeBase64
(خياري)		 boolean يشير إلى ما إذا كان ينبغي أيضًا تضمين بيانات الصورة المنسقة BASE64 في CropResult .
القيمة الافتراضية : false
headers
(خياري)		 object | Headers واجهة كائن أو Headers تمثل رؤوس HTTP لإرسالها مع طلب صورة عن بعد.

result: CropResult

اسم يكتب وصف
uri string المسار إلى ملف الصورة (مثال: 'file:///data/user/0/.../image.jpg' )
الويب: uri هي سلسلة البيانات URI (مثال 'data:image/jpeg;base64,/4AAQ...AQABAA' )
path string uri من الصورة (مثال: '/data/user/0/.../image.jpg' )
الويب: path هو url blob (مثال 'blob:https://example.com/43ff7a16...e46b1' )
name string اسم ملف الصورة. (مثال: 'image.jpg' )
width number عرض الصورة بالبكسل
height number ارتفاع الصورة بالبكسل
size number حجم الصورة بالبايت
type string نوع MIME للصورة ( 'image/jpeg' ، 'image/png' ، 'image/webp' )
base64
(خياري)		 string مثال على بيانات الصورة المصنوعة من BASE64: '/9j/4AAQSkZJRgABAQAAAQABAAD'
إذا كنت بحاجة إلى Data URI source لعنصر Image على سبيل المثال ، فيمكنك استخدام data:${type};base64,${base64}

لمزيد من الاستخدام المتقدم ، تحقق من تطبيق المثال الخاص بنا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل