หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

@React-Native-Community/Image-editor

โมดูล Natitor Editor Image สำหรับ 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 หาก 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' )
Web: path คือ blob url (ตัวอย่าง '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'
หากคุณต้องการข้อมูล URI เป็น source สำหรับองค์ประกอบ Image เช่นคุณสามารถใช้ data:${type};base64,${base64}

สำหรับการใช้งานขั้นสูงให้ตรวจสอบแอปตัวอย่างของเรา

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด