Então, vamos começar com a configuração disso. Aqui, iniciar a câmera assíncrona é a função que chamamos
de abrir a câmera, mas na verdade você pode configurar um pouco.
Se você passar um objeto aqui, terá algumas opções que poderá definir e, é claro, os documentos oficiais da exposição para
o seletor de imagens são o lugar para você aprender tudo sobre essas opções.
Agora, as configurações padrão são realmente muito
boas, mas por exemplo, aqui, você pode adicionar edição e configurá-lo como true para obter um editor básico que
permita cortar a imagem, por exemplo, e isso é algo que eu ativarei aqui.
Você também pode definir uma proporção específica em que deseja fazer login, como 16: 9, que será levada
em consideração no seu modo de edição.
Você também pode definir se deseja uma string base64 em vez de um arquivo ou, além do arquivo, devo dizer, o que significa que
você obtém uma string de texto que representa sua imagem, que é bastante grande e não o farei aqui
e você também pode controlar a qualidade e lá, definirei a qualidade como 0.
5, esse deve ser um valor entre 0 e 1, em que um é o valor mais alto possível
e, claro, isso também afeta o tamanho da imagem a partir de então.
Então, você deseja escolher um tamanho ou uma qualidade que faça sentido para o seu aplicativo.
Se você estiver usando apenas a imagem como miniatura, poderá não precisar de imagens em alta resolução. Com isso, isso está configurado e a
questão, claro, é: como obter acesso à imagem que foi tirada?
Bem, lembre-se de que isso é uma promessa ou que isso retorna uma promessa.
Bem, é
claro, portanto, podemos aguardar essa promessa e o resultado que obtemos após a promessa resolvida é realmente a imagem, para
que possamos armazenar essa imagem em uma constante. Uma imagem agora é um objeto com várias informações sobre a
imagem que foi tirada.
Então, aqui, podemos consolar a imagem do log para ver o que há lá.
Vamos salvar isso e testá-lo no Android. Lá, se eu agora for
para essa nova tela aqui, tirar uma foto e eu tirar essa imagem com esta câmera simuladora fictícia eu chego aqui
e
confirmo isso, agora eu vou para este
recorte ou para esta ferramenta de edição porque habilitei a edição, aqui eu tenho esse formato de formato 16: 9
que posso mover e, clicando em cortar, agora posso selecionar isso e, se agora
dermos uma olhada no console, vemos que esse é o objeto que recuperamos.
É um objeto com um campo cancelado que nos diz que isso não foi cancelado, mas que tiramos uma imagem;
portanto,
é um campo que podemos verificar para descobrir se o usuário tirou uma imagem ou se o
processo foi cancelado.
Obtemos a altura da imagem
e a largura, obtemos o tipo que é a imagem e o URI, portanto, um link para o arquivo de imagem.
Agora, ele está em um diretório temporário, que é limpo automaticamente periodicamente; portanto,
é claro que não é o armazenamento ou o caminho em que você deseja armazená-lo permanentemente, e nós o moveremos
mais tarde com a API do sistema de arquivos, mas, por enquanto, isso
é algo que pode trabalhar com.
Então, para produzir uma visualização, podemos gerenciar algum estado aqui no seletor de imagens importando use state e inicializando-o lá em
cima, use state pode ser chamado aqui e, é claro, eu recebo alguns dados aqui
e essa é a minha imagem escolhida e defina a função de imagem escolhida como você está acostumado a
partir do estado de uso e
agora podemos utilizá-la aqui.
Aqui eu quero definir a imagem escolhida para a imagem. uri, de modo que o link para
a minha imagem, para que o
caminho como uma string para a minha imagem e o mais interessante é que esse caminho possa ser usado com o componente de
imagem, ele funciona com o componente de imagem sem nenhuma configuração especial.
Portanto, podemos adicionar código-fonte e agora precisamos configurá-lo como
um objeto com essa propriedade URI. Até o momento, no curso, usamos isso para apontar para imagens de
rede, bem, você também pode apontar para
imagens locais, então aqui podemos apontar para a imagem escolhida.
É claro que isso só funciona se tivermos uma imagem escolhida, o que só acontece depois
de usar a câmera. Agora, podemos adicionar um if check aqui ou uma simples expressão ternária,
onde verificamos se a imagem escolhida está definida e se não está definida, portanto, o ponto de exclamação, mostro esse texto de fallback, caso
contrário, com dois pontos aqui, defino a imagem e agora temos essa saída condicional e, portanto, se salvarmos isso e, portanto, reiniciar nos dois
dispositivos, nos dois simuladores, se eu for para o Android e eu tiro
minha imagem aqui, é claro que essa câmera abre sem surpresa. Podemos confirmar isso, escolher nossa imagem, cortá-la
e
agora a vemos aqui na visualização, então essa é
a nossa imagem agora sendo usada.
E com isso, é claro que é hora de adicioná-lo ao local que podemos adicionar clicando no botão Salvar local e é hora
de adicionar algum espaçamento entre esses dois botões, eu acho.