O componente imagem dinâmica é utilizado para fazer ouploadde 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 blocoObter valor do Campo. Após obter, o componente sempre renderizará a imagem.
Figura 1 - Exemplo do componente rodando no simulador
Acesse o tópico "Upload de arquivos" na páginaArquivos para conhecer outras formas de fazer upload no Cronapp.
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 formainline.
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.