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, 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 renderizará a 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 navegador 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
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 poderá ser editada de forma simples, como rotacionar, recortar. |
Tamanho máximo do arquivo | max-file-size | Especifica o tamanho máximo em MB do arquivo. |
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), 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. |
Aba de 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 | infield | 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. |
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 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 entidade e selecione a opção Criar visão para a entidade (Figura 2.1).
Figura 2.1 - Criando visão para a entidade
Nome em inglês
Dynamic Image
Nesta página
Compatibilidade
Formulário mobile
Equivalente mobile
Imagem dinâmica (web)
Botão do Componente
Imagem no Editor Visual
