react native image resizer
3.0.10
คำเตือน เนื่องจากเวอร์ชัน 3.0.0 ไลบรารีนี้ถูกย้ายจาก
react-native-image-resizerไปที่@bam.tech/react-native-image-resizer
ตั้งแต่เวอร์ชัน 3.0.0 แพ็คเกจนี้รองรับสถาปัตยกรรมใหม่ทันที (Turbo Module) มันยังมีความเข้ากันได้ย้อนหลังกับอันเก่าอีกด้วย
yarn add @bam.tech/react-native-image-resizer
cd ios && pod install
yarn add [email protected]
cd ios && pod install
หมายเหตุ: ใน React Native เวอร์ชันล่าสุด คุณอาจมีข้อผิดพลาดระหว่าง Gradle build บน Android ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ) เรียกใช้ cd android && ./gradlew clean เพื่อแก้ไขปัญหานี้
ข้อมูลลิงค์แบบแมนนวลสำหรับ Android: ลิงค์
import ImageResizer from '@bam.tech/react-native-image-resizer' ;
ImageResizer . createResizedImage (
path ,
maxWidth ,
maxHeight ,
compressFormat ,
quality ,
rotation ,
outputPath
)
. then ( ( response ) => {
// response.uri is the URI of the new image that can now be displayed, uploaded...
// response.path is the path of the new image
// response.name is the name of the new image with the extension
// response.size is the size of the new image
} )
. catch ( ( err ) => {
// Oops, something went wrong. Check that the filename is correct and
// inspect err to get more details.
} ) ; แอปตัวอย่างพื้นฐานมีอยู่ในโฟลเดอร์ example ใช้โมดูลเพื่อปรับขนาดภาพถ่ายจาก Camera Roll
createResizedImage (
/**
* uri parameter accepts`path` or `uri`.
* This property has been tested with the output of @bam.tech/react-native-image-picker,
* react-native-vision-camera, @react-native-camera-roll/camera-roll and http link
**/
uri ,
maxWidth ,
maxHeight ,
compressFormat ,
quality ,
( rotation = 0 ) ,
outputPath ,
( keepMeta = false ) ,
( options = { } )
) ; // Returns a Promise สัญญาแก้ไขด้วยวัตถุที่มี: path , uri , name , size (ไบต์), width (พิกเซล) และ height ของไฟล์ใหม่ URI สามารถใช้เป็น source ของส่วนประกอบ <Image> ได้โดยตรง
| ตัวเลือก | คำอธิบาย |
|---|---|
| เส้นทาง | เส้นทางของไฟล์รูปภาพ หรือสตริงรูปภาพที่เข้ารหัส base64 นำหน้าด้วย 'data:image/imagetype' โดยที่ imagetype เป็น jpeg หรือ png |
| ความกว้าง | ความกว้างที่จะปรับขนาดเป็น (ดู mode สำหรับรายละเอียดเพิ่มเติม) |
| ความสูง | ความสูงที่จะปรับขนาดเป็น (ดู mode สำหรับรายละเอียดเพิ่มเติม) |
| บีบอัดรูปแบบ | สามารถเป็นได้ทั้ง JPEG, PNG หรือ WEBP (Android เท่านั้น) |
| คุณภาพ | ตัวเลขระหว่าง 0 ถึง 100 ใช้สำหรับการบีบอัด JPEG |
| การหมุน | การหมุนเพื่อใช้กับรูปภาพ เป็นองศา สำหรับ Android บน iOS การหมุนจะถูกจำกัด (และปัดเศษ) ให้เป็นทวีคูณของ 90 องศา |
| เส้นทางขาออก | เส้นทางภาพที่ปรับขนาดแล้ว หากเป็นค่าว่าง รูปภาพที่ปรับขนาดจะถูกเก็บไว้ในโฟลเดอร์แคช ในการตั้งค่า outputPath อย่าลืมเพิ่มตัวเลือกสำหรับการหมุนด้วย (หากไม่จำเป็นต้องหมุน เพียงตั้งค่าเป็น 0) |
| KeepMeta | หากเป็น true จะพยายามรักษาข้อมูลเมตาของไฟล์/ข้อมูล exif ทั้งหมด ยกเว้นค่าการวางแนว เนื่องจากการปรับขนาดจะเป็นการแก้ไขการหมุนของรูปภาพต้นฉบับด้วย ค่าเริ่มต้นเป็น false ซึ่งหมายความว่าข้อมูลเมตาทั้งหมดจะหายไป หมายเหตุ: สิ่งนี้สามารถเกิด true เฉพาะกับรูปภาพ JPEG ที่โหลดจากระบบไฟล์ (ไม่ใช่เว็บ) |
| ตัวเลือก.โหมด | คล้ายกับ resizeMode ของรูปภาพแบบโต้ตอบพื้นเมือง: contain (ค่าเริ่มต้น), cover หรือ stretch contain จะพอดีกับรูปภาพภายใน width และ height โดยคงอัตราส่วนไว้ cover จะรักษาอัตราส่วนกว้างยาวไว้ และตรวจสอบให้แน่ใจว่ารูปภาพมี width หรือ height เป็นอย่างน้อย stretch จะปรับขนาดรูปภาพให้ width และ height พอดี |
| ตัวเลือก.เท่านั้นScaleDown | ถ้าเป็น true จะไม่ขยายภาพเลย และจะแต่ทำให้เล็กลงเท่านั้น |
@react-native-camera-roll/camera-roll ด้วยสถาปัตยกรรมใหม่ที่เปิดใช้งาน ไลบรารีนี้จะไม่ทำงาน หากคุณพยายามแสดงรูปภาพด้วย uri ของไลบรารีโดยใช้ <Image /> คุณจะมีข้อผิดพลาดต่อไปนี้: No suitable image URL loader found for ph://... ข้อผิดพลาดนี้มาจาก ReactNative ImageLoader ซึ่งเป็นอันที่เราใช้อยู่ในปัจจุบัน ยินดีช่วยเหลือ/ประชาสัมพันธ์เพื่อแก้ไขปัญหานี้ ในระหว่างนี้ เราขอแนะนำให้ใช้ react-native-image-pickerเราเป็นบริษัทที่มีบุคลากร 100 คนพัฒนาและออกแบบแอปพลิเคชันหลายแพลตฟอร์มด้วย React Native โดยใช้ระเบียบวิธีแบบ Lean & Agile หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับโซลูชันที่เหมาะกับความต้องการของคุณ โปรดติดต่อทางอีเมลหรือผ่านแบบฟอร์มติดต่อ!
เราจะตอบคุณด้วยความยินดีเสมอ ?
