react native image editor

@React-Native-nive-community/image-editor

圖像編輯器本機模塊用於React Native。

最初是從React本地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將指向緩存路徑中的圖像。配x請記住，完成後，從高速緩存路徑中刪除裁剪的圖像。

 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' ，Web-沒有支持） 默認值： 'cover'
quality （選修的）	number	範圍0.0 1.0值指定結果圖像的壓縮水平。 1表示沒有壓縮（最高質量）和0最高壓縮（質量最低） 默認值： 0.9
format （選修的）	'jpeg' | 'png' | 'webp'	結果圖像的格式。 默認值：基於提供的圖像； 如果無法確定值， 'jpeg'將用作後備。 iOS不支持'webp' 。
includeBase64 （選修的）	boolean	指示Base64格式的圖片數據是否也應包括在CropResult中。 默認值： false
headers （選修的）	object | Headers	代表HTTP標頭的對像或Headers接口以及遠程圖像請求一起發送的。

result: CropResult

姓名	類型	描述
uri	string	圖像文件的路徑（示例： 'file:///data/user/0/.../image.jpg' ） Web： uri是數據URI字符串（示例'data:image/jpeg;base64,/4AAQ...AQABAA' ）
path	string	圖像的URI（示例： '/data/user/0/.../image.jpg' ） 網絡： 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作為Image元素的source ，則可以使用data:${type};base64,${base64}

有關更高級的用法，請檢查我們的示例應用程序。