Função
O componente imagem dinâmica é utilizado para fazer o upload de qualquer arquivo do tipo imagem. Ao clicar no componente, será aberto o aplicativo de fotos para fazer a seleção de uma imagem ao componente e após obter, o componente exibirá a imagem selecionada. O componente sempre irá converter a imagem para o formato Base64, sendo possível obter esse conteúdo usando o bloco Obter valor do Campo.
Para obter o arquivo da imagem ao invés do Base64, utilize o bloco Obter Imagem.
Figura 1 - Exemplo do componente rodando no simulador
O componente também possui um botão "câmera" que abre a aplicação de captura de imagem, permitindo tirar uma foto do usuário. O aplicativo solicitará autorização do usuário para essa ação, esse recurso só vai funcionar se o projeto estiver rodando via HTTPS, não irá funcionar ao usar HTTP.
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
|---|---|---|
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Título | content | Altera o texto que irá aparecer como título agregando informações ao componente do upload. |
| Altura desejada (em pixel) | target-height | Define a altura do componente. |
| Largura desejada (em pixel) | target-width | Define a largura do componente. |
| Permitir edição | allow-edit | Define se a imagem capturada pela câmera poderá ser editada ou não antes de salvar. A edição permite selecionar uma área da imagem para cortar. |
Tamanho máximo da imagem | max-file-size | Especifica o tamanho máximo em MB do arquivo. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
| Resolução da imagem | quality | Define a qualidade, em porcentagem, da imagem que será exibida, os valores variam entre: super baixa (10), Baixa (30), Média (50), Padrão (60), Alta (80) e Super alta (100). |
| Valor alternativo | alt | Atributo do tipo texto, ele especifica um texto alternativo caso a imagem não seja mostrada. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
| Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou ocultar o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
| Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Eventos
Na tabela abaixo estão descritos os principais eventos do componente.
| Nome | Propriedade | Função |
|---|---|---|
| Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
| Ao Clique Rápido | on-tap | Executa uma ação sempre que um elemento é clicado. |
Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Imagem dinâmica.
Nome em português | Nome em inglês | Descrição |
|---|---|---|
| Campo interno | Internal Field | Estiliza a parte interna do componente. |
| Título | Title | Estiliza o título do componente. |
| Botão da câmera | Camera Button | Estiliza o campo botão da câmera do componente. |
| Botão de fechar | Close Button | Estiliza o botão do componente. |
Permitir edição
A propriedade Permitir edição do componente determina se é possível editar a imagem após a captura. Quando essa opção está habilitada, logo após a captura, será exibida uma tela de edição (Figura 1.1), na qual o usuário poderá selecionar a área da imagem que deseja cortar. Ao finalizar a edição, a imagem será exibida no componente com a alteração aplicada.
É importante destacar que essa configuração faz uso do aplicativo nativo do Android ou IOS, o que significa que esse recurso não estará disponível, por exemplo, em um PWA (Progressive Web App).
Figura 1.1 - Editando imagem após captura
Adicionar via gerador de CRUD
O componente é automaticamente criado ao utilizar o gerador de CRUD no Diagrama com os atributos do Imagem no Banco ou Imagem no Cloud (Figura 2). O tipo Cloud permite que o arquivo seja configurado e enviado automaticamente para a sua conta no Serviço de Cloud do Cronapp, Amazon S3 ou Dropbox (acesse a documentação do Diagrama para mais detalhes).
Figura 2 - Atributos Imagem no Banco e Imagem no Cloud
Após configurar seus atributos na entidade, clique com o botão direito do mouse sobre a classe e selecione a opção Criar visão para a entidade (Figura 2.1). Ao abrir a janela, selecione a opção Formulário CRUD mobile e avance até finalizar.
Figura 2.1 - Criando visão para a entidade
Em seguida rode o projeto, acesse a página da sua entidade e clique no botão adicionar para visualizar o componente gerado pelo CRUD no Cronapp (Figura 2.2).
Figura 2.2 - Componentes imagem gerados pelo CRUD
Obter base64
Após seleciona uma imagem para o componente, ela será convertida para base64 (Figura 3). É possível obter o conteúdo em base64 a partir do campo Valor (ng-model) do componente. Adicionamos o componente visual Área de texto para obter o conteúdo da Imagem dinâmica em formato base64. Utilize o bloco Obter valor do campo, e vincule o bloco a um formulário de referência, para entender como fazer isso confira no tópico Propriedades do Blockly da documentação Bloco de Programação.
Figura 3- Exibindo o conteúdo em base64 gerado pelo Imagem dinâmica
Exemplo
Nesse exemplos vamos obter uma imagem utilizando a componente Imagem dinâmica e renderizar o seu conteúdo no componente Imagem.
Adicione o componente imagem e imagem dinâmica em um formulário mobile. Selecione o componente imagem e configure o campo origem em propriedades clicando no ícone editar expressão (destaque 1 da Figura 3.1), informe a URI Data schema do base64 mais o valor do componente Imagem dinâmica, ficando como no destaque 2 da figura abaixo. Obs: entre o componente Imagem dinâmica e Imagem, inserimos o componente Espaço, somente para melhor apresentação do resultado.
data:image/png;base64,{{vars.<ng-model do componente imagem dinâmica>}}
O URI Data Schema possui a sintaxe: data:[<media type>][;base64],<data>. No exemplo da figura 3.1, o mediatype é uma string tipo MIME (como image/png - informando que a imagem é do tipo PNG) e o data é o valor do ng-model do componente Imagem dinâmica.
Figura 3.1 - Passando o URI schema e o valor da componente imagem dinâmica para o componente Imagem
Ao executar a aplicação e adicionar uma imagem ao componente Imagem dinâmica, ela será convertida em base64 e o componente Imagem obterá seu valor e a renderizará na tela (Figura 3.2).
Figura 3.2 - Resultado da configuração do componente Imagem
Nome em inglês
Dynamic Image
Nesta página
Compatibilidade
Formulário mobile
Equivalente mobile
Botão do Componente
Imagem no Editor Visual
