react native image editor

@react-native-comunity/imagem-editor

Módulo Nativo do Editor de Imagens para React Nativo.

Originalmente extraído da issue#23313 e mantida pela comunidade.

Começando

Instalar

yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save

Instale pods

npx pod-install

Uso

Comece importando a biblioteca:

 import ImageEditor from '@react-native-community/image-editor' ;

Imagem da colheita

Corte a imagem especificada pelo param URI. Se o URI apontar para uma imagem remota, ele será baixado automaticamente. Se a imagem não puder ser carregada/baixada, a promessa será rejeitada.

Se o processo de corte for bem -sucedido, a imagem cortada resultante será armazenada no caminho do cache, e o CropResult retornado na promessa apontará para a imagem no caminho do cache. ️ Lembre -se de excluir a imagem cortada do caminho do cache quando terminar.

 ImageEditor . cropImage ( uri , cropData ) . then ( ( result ) => {
  console . log ( 'Cropped image uri:' , result . uri ) ;
} ) ;

cropData: ImageCropData

Nome	Tipo	Descrição
offset	{ x: number, y: number }	O canto superior esquerdo da imagem cortada, especificada no espaço de coordenadas da imagem original
size	{ width: number, height: number }	Tamanho (dimensões) da imagem cortada
displaySize (opcional)	{ width: number, height: number }	Tamanho para o qual você deseja escalar a imagem cortada
resizeMode (opcional)	'contain' | 'cover' | 'stretch' | 'center'	Modo de redimensionamento a ser usado ao escalar a imagem (apenas iOS, o modo de redimensionamento Android é sempre 'cover' , web - sem suporte) Valor padrão : 'cover'
quality (opcional)	number	Um valor no intervalo de 0.0 - 1.0 especificando o nível de compressão da imagem do resultado. 1 significa sem compressão (mais alta qualidade) e 0 a compressão mais alta (qualidade mais baixa) Valor padrão : 0.9
format (opcional)	'jpeg' | 'png' | 'webp'	O formato da imagem resultante. Valor padrão : com base na imagem fornecida; Se a determinação do valor não for possível, 'jpeg' será usado como fallback. 'webp' não é suportado pelo iOS.
includeBase64 (opcional)	boolean	Indica se os dados de imagem formatados base64 também devem ser incluídos no CropResult . Valor padrão : false
headers (opcional)	object | Headers	Uma interface de objeto ou Headers representando os cabeçalhos HTTP para enviar junto com a solicitação de uma imagem remota.

result: CropResult

Nome	Tipo	Descrição
uri	string	O caminho para o arquivo de imagem (exemplo: 'file:///data/user/0/.../image.jpg' ) Web: uri é a string uri de dados (Exemplo 'data:image/jpeg;base64,/4AAQ...AQABAA' )
path	string	O URI da imagem (exemplo: '/data/user/0/.../image.jpg' ) Web: path é o URL do blob (Exemplo 'blob:https://example.com/43ff7a16...e46b1' )
name	string	O nome do arquivo de imagem. (Exemplo: 'image.jpg' )
width	number	A largura da imagem em pixels
height	number	Altura da imagem em pixels
size	number	O tamanho da imagem em bytes
type	string	O tipo MIME da imagem ( 'image/jpeg' , 'image/png' , 'image/webp' )
base64 (opcional)	string	Exemplo de dados de imagem codificada por Base64: '/9j/4AAQSkZJRgABAQAAAQABAAD' Se você precisar de dados de dados como source de um elemento Image , por exemplo, você pode usar data:${type};base64,${base64}

Para uso mais avançado, verifique nosso aplicativo de exemplo.