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}

有关更高级的用法，请检查我们的示例应用程序。