Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
A componente imagem dinâmica é utilizada 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 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
Dica |
---|
Acesse o tópico "Upload de arquivos" na página Arquivos para conhecer outras formas de fazer upload no Cronapp. |
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|
Texto interno | content | Alterar o |
o texto da área de arraste do componente. | ||
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. | |
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. |
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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
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 | |
---|---|---|---|
TextoTítulo | TextTitle | Estiliza o texto título do componente. | |
BotãoCampo pontilhado | ButtonDotted Field | Estiliza o botão campo pontilhado do componente. | Campo pontilhado|
Botão | Dotted FieldButton | Estiliza o | campo pontilhadobotã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 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 do Diagrama 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). Assim é É possível obter o conteúdo em base64 a partir do campo Valor (ng-model) do componente.
Figura 3.1 - Imprimindo o valor do componente (base64) no console do navegador
Exemplo
Nesse exemplos vamos obter uma imagem utilizando a 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 configure o campo origem em em propriedades , clicando no ícone editar expressão (destaque 1 da Figura 3.2): informe a URI Data schema do base64 mais o valor do componente Imagem dinâmica, ficando como no destaque 2 da figura abaixo.
Bloco de código | ||
---|---|---|
| ||
data:image/png;base64,{{vars.<ng-model do componente imagem dinâmica>}} |
O URI Data Schema possui a sintaxe: data:[<media type>][;base64],<data>
. 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.
Image Modified
Figura 3.2 - Passando o URI schema e o valor da componente imagem dinâmica
Ao rodar a aplicação e adicionar uma imagem no componente Imagem dinâmica, ela será converter em base64 e o componente imagem irá 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
Nesta página
Índice
Compatibilidade
Formulário web
Equivalente mobile
Imagem dinâmica (mobile)
Botão do Componente
Image Modified
Imagem no Editor Visual
Image Modified