Função

A componente imagem dinâmica é utilizada para fazer o upload de qualquer arquivo do tipo imagem. Ao clicar no componente, será aberta uma janela para fazer a adição de uma imagem ao componente, também é possível arrastar uma imagem do seu computador até o campo. Após utilizar o componente, a imagem é convertida para Base64 e é possível obter usando o bloco Obter valor do Campo. Após obter, o componente sempre renderiza a imagem.

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 navegador solicitará autorização do usuário para essa ação.

Figura 1 - Exemplo do componente rodando no Browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Imagem dinâmica.

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.1). O tipo Cloud permite 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  para do Diagrama para mais detalhes).

Figura 2.1 - 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 entidade e selecione a opção Criar visão para a entidade (Figura 2.2).

Figura 2.2 - 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 arquivo gerado pelo CRUD no Cronapp (Figura 2.3).

Figura 2.3 - Componentes imagem gerados pelo CRUD

Obter base64

Após seleciona uma imagem para o componente, ela será convertida para base64 (Figura 3.1). Assim é É possível obter o conteúdo em base64 a partir do campo Valor (ng-model) do componente.

Figura 3.1 - Imprimindo o valor do componente (base64) no console do navegador

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 web. Selecione o componente imagem e configure o campo origem em em propriedades , clicando no ícone editar expressão (destaque 1 da Figura 3.2): informe a URI Data schema do base64 mais o valor do componente Imagem dinâmica, ficando como no destaque 2 da figura abaixo.

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.2, 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.

Image Modified

Figura 3.2 - Passando o URI schema e o valor da componente imagem dinâmica 

Ao rodar a aplicação e adicionar uma imagem no componente Imagem dinâmica, ela será converter em base64 e o componente imagem irá obter seu valor e renderizar na tela (Figura 3.3).

Figura 3.3 - Resultado da configuração do componente Imagem