Função
O componente imagem dinâmica é utilizado 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 - ou, somente basta arrastar essa imagem até o campo. Após utilizar o componente, a imagem é convertida para Base64 e é possível obter usando o bloco "Obter valor do Campo".
Figura 1 - Exemplo do componente rodando no Browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
| Nome | Propriedade | Função |
|---|---|---|
Conteúdo | content | Alterar o rótulo do componente. |
Valor | ng-model | Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Conteúdo | label | Altera o texto que irá aparecer como título agregando informações ao componente do upload. |
| Texto alternativo | img-alt-text | Informa o texto quando a imagem não seja exibida. |
Tamanho máximo do arquivo | max-file-size | Especifica o tamanho máximo em MB do arquivo. |
Requerido | ng-required | Específica sem o campo será ou não obrigatório. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Exibir | ng-show | Propriedade AngularJS 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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Ícone da câmera
Ao clicar no ícone da câmera presente no componente, será ligado a câmera do dispositivo (após a permissão do usuário) que a aplicação esteja rodando no momento para realizar a captura da imagem - ou seja, será tirada uma foto do usuário.
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 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 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).
Figura 3.1 - Base64 da imagem selecionada no componente
Exemplo
Adicione o componente imagem e imagem dinâmica em um formulário. Selecione o componente imagem e configure o campo origem (1 da Figura 3.2) em propriedades, clicando no ícone editar expressão (2 da Figura 3.2) e configure a expressão [data uri schema|data URI scheme] + ng-model da imagem dinâmica de acordo com a imagem e o componente imagem dinâmica utilizado (3 da Figura 3.2).
Figura 3.2 - Configurando campo Origem do componente Imagem
Ao rodar a aplicação e adicionar uma imagem no componente em imagem dinâmica, ela será convertida em base64 e o componente imagem irá exbi-la no formulário (Figura 3.3).
Figura 3.3 - Resultado da configuração do componente Imagem
Nome em inglês
Dynamic Image
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Imagem dinâmica (mobile)
Botão do Componente
Imagem no Editor Visual