Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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
Além de obter a imagem utilizando o bloco obter valor do campo, outra forma de obter a imagem e renderiza-lá na aplicação é utilizar o componente imagem. Então 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).
Nome em inglês
Dynamic Image
Nessa página
Índice
Compatibilidade
Formulário web
Equivalente mobile
Imagem dinâmica (mobile)
Botão do Componente
Imagem no Editor Visual