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 , 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.
| 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 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 do componente.
Figura 3.1 - Base64 da imagem selecionada no componente
Exemplo
Imprimindo o valor do componente (base64) no console do navegador
Exemplo
Nesse exemplos vamos obter uma imagem utilizando o 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 imagem e configure o campo origem (1 da Figura 3.2) em em propriedades, clicando no ícone editar expressão (2 destaque 1 da Figura 3.2) e configure a expressão : informe a URI Data schema do base64 mais o valor do componente Imagem dinâmica, ficando como no destaque 2 da figura abaixo.
O URI Data Schema possui a sintaxe: data:[<mediatype><media type>][;base64],<data> 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
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. Imagem dinâmica.
Figura 3.2 - Passando o URI schema e o valor do componente imagem dinâmica
Ao rodar a aplicação e adicionar uma imagem no componente em imagem componente Imagem dinâmica, ela será convertida converter em base64 e o componente imagem irá exibi-la no formulário obter seu valor e renderizar na tela (Figura 3.3).
Figura 3.3 - Resultado da configuração do componente Imagem
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