react native image editor

@React-Com-Community/Emage-Editor

Редактор изображений Национальный модуль для NACT Native.

Первоначально извлечен из Native 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' , Web - без поддержки) Значение по умолчанию : 'cover'
quality (необязательный)	number	Значение в диапазоне 0.0 - 1.0 Указание уровня сжатия изображения результата. 1 означает отсутствие сжатия (самого высокого качества) и 0 самых высокого сжатия (самое низкое качество) Значение по умолчанию : 0.9
format (необязательный)	'jpeg' | 'png' | 'webp'	Формат полученного изображения. Значение по умолчанию : на основе предоставленного изображения; Если определение значения невозможно, 'jpeg' будет использоваться в качестве запасного. 'webp' не поддерживается iOS.
includeBase64 (необязательный)	boolean	Указывает, следует ли в CropResult также включить данные форматированных изображений Base64. Значение по умолчанию : false
headers (необязательный)	object | Headers	Интерфейс объекта или Headers представляющий заголовки HTTP для отправки вместе с запросом на удаленное изображение.

result: CropResult

Имя	Тип	Описание
uri	string	Путь к файлу изображения (пример: 'file:///data/user/0/.../image.jpg' ) Web: uri - это строка Data URI (пример 'data:image/jpeg;base64,/4AAQ...AQABAA' )
path	string	URI изображения (пример: '/data/user/0/.../image.jpg' ) Web: 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}

Для получения более широкого использования проверьте наше пример приложения.