react native image resizer

Redimensionador de imagem nativo React

Aviso Desde a versão 3.0.0 esta biblioteca foi movida de react-native-image-resizer para @bam.tech/react-native-image-resizer

Configurar

Reagir nativo >= 0,61

Desde a versão 3.0.0 este pacote suporta a nova arquitetura pronta para uso (Módulo Turbo). Também possui retrocompatibilidade com o antigo.

 yarn add @bam.tech/react-native-image-resizer
cd ios && pod install

Reagir nativo <= 0,60

 yarn add [email protected]
cd ios && pod install

Android

Nota: nas versões mais recentes do React Native, você pode ter um erro durante a compilação do Gradle no Android ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ). Execute cd android && ./gradlew clean para corrigir isso.

Vinculação manual

Informações do link manual para Android: Link

Exemplo de uso

 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.
  } ) ;

Aplicativo de exemplo

Um aplicativo de amostra básico está disponível na pasta example . Ele usa o módulo para redimensionar uma foto do rolo da câmera.

API

 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

A promessa é resolvida com um objeto contendo: path , uri , name , size (bytes), width (pixels) e height do novo arquivo. O URI pode ser usado diretamente como source de um componente <Image> .

Opção	Descrição
caminho	Caminho do arquivo de imagem ou uma string de imagem codificada em base64 prefixada com 'data:image/imagetype' onde imagetype é jpeg ou png.
largura	Largura para redimensionar (veja mode para mais detalhes)
altura	Altura para redimensionar (veja mode para mais detalhes)
compressFormat	Pode ser JPEG, PNG ou WEBP (somente Android).
qualidade	Um número entre 0 e 100. Usado para compactação JPEG.
rotação	Rotação a ser aplicada à imagem, em graus, para android. No iOS, a rotação é limitada (e arredondada) a múltiplos de 90 graus.
caminho de saída	O caminho da imagem redimensionada. Se for nulo, a imagem redimensionada será armazenada na pasta cache. Para definir outputPath, certifique-se de adicionar também a opção de rotação (se nenhuma rotação for necessária, basta configurá-la como 0).
manterMeta	Se true , tentará preservar todas as informações de metadados/exif do arquivo, exceto o valor de orientação, pois o redimensionamento também faz correção de rotação na imagem original. O padrão é false , o que significa que todos os metadados são perdidos. Nota: Isso só pode ser true para imagens JPEG carregadas do sistema de arquivos (não da Web).
opções.modo	Semelhante ao resizeMode da imagem react-native: contain (o padrão), cover ou stretch . contain ajustará a imagem dentro width e height , preservando sua proporção. cover preserva a proporção e garante que a imagem tenha pelo menos width ou height . stretch redimensionará a imagem exatamente para width e height .
opções.onlyScaleDown	Se true , nunca ampliará a imagem e apenas a tornará menor.

Limitações

• Se você estiver usando @react-native-camera-roll/camera-roll com a nova arquitetura habilitada, esta biblioteca não funcionará . Se você tentar exibir uma imagem com o uri da biblioteca usando <Image /> você terá o seguinte erro: No suitable image URL loader found for ph://... . Este erro vem do ReactNative ImageLoader , que é o que estamos usando atualmente. Ajuda/PR para resolver isso é bem-vinda. Até então, recomendamos o uso de react-native-image-picker .
• A orientação EXIF ​​da imagem é tratada corretamente apenas no Android, mas ainda não no IOS #402.

Sobre Bam

Somos uma empresa de 100 pessoas desenvolvendo e projetando aplicações multiplataforma com React Native utilizando a metodologia Lean & Agile. Para obter mais informações sobre as soluções que mais se adequam às suas necessidades, não hesite em entrar em contacto por email ou através do formulário de contacto!

Sempre responderemos com prazer?