Converter imagem para Base64 e o Inverso

Com estas funções pode converter uma imagem inserida num Timage em Base64 e converter um Base64 em Imagem.

uses
  System.SysUtils,
 System.Classes,
 FMX.Graphics,
 Soap.EncdDecd;

function Base64FromBitmap(Bitmap: TBitmap): string;
var
  Input: TBytesStream;
  Output: TStringStream;
  F: TextFile; // Apenas para exemplo
begin
  Input := TBytesStream.Create;
  try
    Bitmap.SaveToStream(Input);
    Input.Position := 0;
    Output := TStringStream.Create('', TEncoding.ASCII);
    try
      Soap.EncdDecd.EncodeStream(Input, Output);
      Result := Output.DataString;
   
    //Criar um ficheiro txt com o codigo base 64  apenas para exemplo
      AssignFile(f,'imagem.txt');
      Rewrite(f); //abre o arquivo para escrita
      Writeln(f,Result);
      Closefile(f);

    finally
      Output.Free;
    end;
  finally
    Input.Free;
  end;
end;

function BitmapFromBase64(const base64: string): TBitmap;
var
  Input: TStringStream;
  Output: TBytesStream;

begin
  Input := TStringStream.Create(base64, TEncoding.ASCII);
  try
    Output := TBytesStream.Create;
    try
      Soap.EncdDecd.DecodeStream(Input, Output);
      Output.Position := 0;
      Result := TBitmap.Create;
      try
        Result.LoadFromStream(Output);
      except
        Result.Free;
        raise;
      end;
    finally
      Output.Free;
    end;
  finally
    Input.Free;
  end;
end;

COMO USAR A FUNÇÃO


Crie um Timage e atribua uma imagem .
Crie um Botão e na função click insira o seguinte codigo.

procedure btconverterimagemClick(Sender: TObject);
begin
    showmessage(Base64FromBitmap(nomedoTimage.Bitmap));
end;

String Data do formato ORIGEM para o formato DESTINO

{Recebe uma string de data, convertendo-a do formato ORIGEM para o formato DESTINO e coloco o simbolo desejado dependo do sistema 

Exemplo : InverteStringData('2017-05-12','AAAA-MM-DD','DD/MM/AAAA','/'); 
Retorno : 12/05/2017

}

function InverteStringData(sData, sFormatoOrigem,sFormatoDestino,simbolo: String): String;

var
sDia : String;
sMes : String;
sAno : String;
begin
  if (sFormatoOrigem = 'DD/MM/AAAA') or (sFormatoOrigem = 'DD-MM-AAAA') then
  begin
    sDia := Copy(sData,1,2);
    sMes := Copy(sData,4,2);
    sAno := Copy(sData,7,4);
  end
  else
  if (sFormatoOrigem = 'MM/DD/AAAA')  or (sFormatoOrigem = 'MM-DD-AAAA')  then
  begin
    sMes := Copy(sData,1,2);
    sDia := Copy(sData,4,2);
    sAno := Copy(sData,7,4);
  end
  else
  if (sFormatoOrigem = 'AAAA/MM/DD') or (sFormatoOrigem = 'AAAA-MM-DD')  then
  begin
    sAno := Copy(sData,1,4);
    sMes := Copy(sData,6,2);
    sDia := Copy(sData,9,2);
  end
  else
  begin
    Result := DateToStr(Date);
  Exit;
  end;
  if (sFormatoDestino  = 'DD/MM/AAAA') or (sFormatoDestino  = 'DD-MM-AAAA') then
  begin
    Result := sDia + simbolo + sMes + simbolo + sAno;
  end
  else
  if (sFormatoDestino  = 'MM/DD/AAAA')  or (sFormatoDestino  = 'MM-DD-AAAA')  then
  begin
    Result := sMes + simbolo + sDia + simbolo + sAno;
  end
  else
  if (sFormatoDestino  = 'AAAA/MM/DD') or (sFormatoDestino  = 'AAAA-MM-DD')  then
   Result := sAno + simbolo + sMes + simbolo+ sDia
  else
  begin
    Result := DateToStr(Date);  // Retorna data do sistema
    Exit;
  end;
end;

Tutorial: Salvar foto no banco SQLite com Android e iOS – 1/2

Nesse pequeno exemplo, vamos imaginar uma tabela de Produtos onde poderemos exibir a foto do produto juntamente com seu Nome, Descrição, tudo isso em um ListView. Então criaremos apenas uma única tabela em nosso banco de dados SQLite. Vamos iniciar criando o layout de nossa aplicação.

Crie um novo aplicativo Multi-Device Application – Delphi utilizando o menu File > New no Delphi 10 Seattle. Utilize um layout de aplicativo em branco (Blank Application) e ao terminar, modifique o nome do form principal para frmPrincipal e salve-o como UntPrincipal.pas. Logo em seguida salve o projeto utilizando o nome FotoSQLite.dproj ou como você desejar. Também modifique a largura do formulário (width) para 320px, ou deixe-o como está se preferir.

Insira um componente TTabCtrl na janela, alinhe-o como Client na propriedade Align e chame-o de tbctrlPrincipal. Adicione a ele 2 (duas) TabItem, a primeira com o nome tbitemListagem e a outra como tbitemDetalhe. Dentro da tbitemListagem adicione um ToolBar e dentro do ToolBar um Label com alinhamento Contents e Text igual a Listagem. Alinhe também o texto desse Label para o centro usando a propriedade TextSettings.HorzAlign.

Ainda dentro da primeira TabItem adicione um componente TListView com o nome igual a lsviewListagem e coloque-o como alinhamento Client. Modifique a sub-propriedade ItemAppearance dentro da propriedade ItemAppearance (existe duas propriedades mesmo, uma dentro da outra) escolhendo o valor MultiDetailItem (Figura 1). Esse valor somente existe se você já instalou o componente ListView que acompanha o Delphi, caso não o tenha feito, siga esse tutorial.

Figura 1. Configurando o ListView

Mude agora o foco para a tbitemDetalhe e adicione uma nova ToolBar nessa TabItem. Insira um componente SppedButton nessa ToolBar e dê o nome a ele de spbVoltar. Modifique seu alinhamento para Left e configure sua margem sequerda (Margin.Left) para 8px. Seu StyleLookup receberá o valor “backtoolbutton”, sem as aspas, claro. Por fim adicione um Label dentro da ToolBar e modifique seu texto para “Detalhe” e alinhe-o como Contents em Align. Altere também o TextSettings.HorzAlign para Center.

Essa aba será o Detalhe do item selecionado no ListView, ou seja, quando o usuário tocar em um item, essa aba será mostrada e os detalhes do items estarão sendo mostrados aqui, assim poderemos inclusive, modificar a foto.

Insira dentro do tbitemDetalhe um componente ListBox e dê o nome a ele de lsboxDetalhe com o alinhamento Client para ocupar toda a tela abaixo da ToolBar. Insira 1 (um) itens nesse ListBox. Apague a propriedade Text dele e aumente a altura para 130px.

No item de ListBox adicione um componente TImage e modifique as seguintes propriedades:

• Name: imgFotoDetalhe
• Align: Left
• Margin.Bottom: 4
• Margin.Left: 4
• Margin.Right: 4
• Margin.Top: 4
• Width: 134

Ainda dentro do item de ListBox, adicione um componente TLayout. Modifique suas margens Bottom, Right e Top com o valor 4 e alinhe o componente utilizando Client na propriedade Align. No interior do Layout adicione dois labels. O primeiro com alinhamento Top e o segundo Client. No segundo Label modifique a propriedade Margin.Top para 4, assim não ficará grudado no primeiro Label. Modifique também a propriedade TextSettings.VertAlign para Leading. Com isso, nós teremos uma janela semelhante a Figura 2 abaixo.

Figura 2. Exemplo de tela de detalhe

Praticamente terminamos a parte de layout, precisamos preparar alguns detalhes. Como mencionado, o usuário poderá tocar em um item na tab de Listagem e ver os detalhes na aba seguinte. Nessa aba o usuário poderá tocar na imagem (TImage) e trocar a imagem desse produto, gravando a figura tanto em tela como no SQLite.

Para isso usaremos algumas ações personalizadas usando o componente TActionList. Por isso, insira um desses componentes em tela e clique duas vezes nele. Clique na “setinha” ao lado do botão New nessa caixa de diálogo que se abre. Adicione uma ação do tipo TChangeTabAction com o Name igual a actMudarAba. Depois insira uma ação TakePhotoFromLibraryAction  (Name = actFotoDaBiblioteca) e uma ação TakePhotoFromCameraAction (Name = actFotoDaCamera). Nossa caixa de diálogo se parecerá com a Figura 3.

Figura 3. Ações

Vamos agora preparar a primeira codificação do nosso aplicativo. Acesse a página de código do Delphi e logo em seguida a seção Private no topo da página. Crie um novo método chamado MudarAba, como abaixo:

?

1	procedure MudarAba(ATabItem: TTabItem: Sender: TObject);

Pressione Ctrl + Shift + C para que o Delphi crie o escopo da função e em seguida codifique como a seguir. Veja que estamos configurando a propriedade Tab da ação actMudarAba para o valor recebido em ATabItem e em seguida chamamos o método ExecuteTarget da ação. Isso será útil para evitarmos toda hora ter que navegar de uma aba para outra via código duplicado. Dessa forma reaproveitamos o código em várias situações.

?

1 2	actMudarAba.Tab := ATabItem; actMudarAba.ExecuteTarget(Sender);

Aproveite e acesse o evento OnItemClick do ListView lsviewListagem e codifique-o digitando a linha abaixo:

?

1	MudarAba(tbitemDetalhe, Sender);

Em outras palavras, ao tocar no item de listagem, seremos redirecionados para a segunda aba do TabCtrl. Por fim, mude para a aba de detalhe e clique duas vezes no botão spbVoltar para que possamos acessar seu evento OnClick. Codifique-o como abaixo:

?

1 2 3 4

if (qryProdutos.State in dsEditModes)  then   qryProdutos.Post;   MudarAba(tbitemListagem, Sender);

Assim o usuário poderá voltar à aba de Listagem quando desejar. Ainda testamos se a tabela está em modo de edição e em caso positivo, gravamos a tabela.

Newsletter: Inscreva-se em nossa Newsletter e receba todas as atualizações de nosso blog. É rápido e fácil. Basta preencher os campos no formulário à direita do blog na parte superior. Confirmar seu cadastro em sua conta de e-mail e pronto! Você receberá um resumo semanal com as publicações da semana anterior.

---

Criando o banco de dados

Em nossos tutoriais sempre utilizamos o aplicativo SQLite Expert Personal, disponível gratuitamente na internet, mas fique a vontade para usar o software que desejar. Com o software aberto, acesse o menu File > New DataBase para criarmos um novo banco de dados vazio. Na janela que se abre, coloque o nome do arquivo e o diretório onde será salvo, de preferência o mesmo em que o aplicativo foi salvo. (Figura 4).

Figura 4. Salvando o banco

Com o banco criado, clique com o botão direito do mouse sobre o nome do banco (Nós colocamos como BancoDados.s3db) e selecione New Table para criarmos uma nova tabela. Insira um primeiro campo nessa tabela chamado FOTO do tipo IMAGE. Adicione também dois novos campos, como abaixo:

1. Nome: TITULO
2. Tipo: NVARCHAR
3. Tamanho: 20

1. Nome: DESCRICAO
2. Tipo: NVARCHAR
3. Tamanho: 50

Esses últimos dois campos serão usados para mostrarmos, respectivamente, o nome e a descrição do produto na listagem. Salve a tabela com o nome de Produtos (Figura 5).

Figura 5. Tabela Produtos Salva

Acesse a aba Data na janela do SQLite Expert e em seguida clique no ícone para adicionar um novo registro. Quando o novo registro aparecer, clique duas vezes nele para que uma janela de edição seja aberta. Digite o nome do produto em TITULO e sua DESCRICAO. Em seguida clique no botão Image Editor e insira uma imagem do computador. Isso irá simular um novo produto com foto e tudo (Figura 6).

Figura 6. Tabela Produtos

---

Configurando o banco na aplicação Mobile

Retorne ao Delphi e vamos agora fazer a configuração para visualizar os dados da tabela em nossa aplicação. Insira um componente FDConnection em tela e mude seu Name para fdConexao. Clique duas vezes nele e vamos configurar a conexão com o banco SQLite. Escolha SQLite no campo Driver ID e na propriedade Database aponte para o BancoDados.s3db. Modifique a propriedade Mode para ReadWrite. Pressione Ok para fechar a janela e desmarque a propriedade LoginPrompt. Agora adicione um componente do tipo TFDPhysSQLiteDriverLink a janela.

Precisamos preparar o banco para ser aberto quando estivermos rodando o aplicativo no mobile, então acesse o evento OnBeforeConnect do fdConexao e digite a linha abaixo:

?

1 2	fdConexao.Params.Values['Database'] :=   TPath.Combine(TPath.GetDocumentsPath, 'BancoDados.s3db');

Não esqueça de adicionar a Unit System.IOUtils à cláusula Uses do formulário para termos acesso as classes TPath.

Perfeito, agora adicione um componente FDQuery e modifique seu Name para qryProdutos, ele serão o componente que usaremos para acessar e mostrar os dados da tabela Produtos em tela. Acesse sua propriedade SQL e digite a query de listagem dos produtos, como abaixo:

?

1	SELECT FOTO, TITULO, DESCRICAO FROM PRODUTOS

Clique com o botão direito do mouse no componente Query e selecione Fields Editor. Na janela que se abrirá, clique novamente com o direito e selecione Add all fields, para adicionar todos os campos da SELECT em nosso componente.

---

Binding dos campos

Estamos quase chegando ao fim do nosso tutorial. Precisamos ligar os campos da tabela aos campos em tela usados para que o usuário possa ter acesso a essas informações. Para isso, clique com o botão direito no formulário e selecione Bind Visually. Localize na janela os componentes qryProdutos e lsviewListagem. Ligue os campos da tabela às células do ListView clicando e arrastando. Se tiver dúvidas, consulte nosso vídeo Biding vs ListViews disponível no YouTube. Faça as ligações como seguem:

• Asterisco => Synch
• FOTO => Item.Bitmap
• TITULO => Item.Text
• DESCRICAO => Item.Detail1

Se tiver dúvidas observe a Figura 7 abaixo:

Figura 7. LivingBindings

Se quiser testar para ver se está tudo ligado corretamente e possível de ser visualizado no ListView, basta marcar a propriedade Active do Query Produtos (qryProdutos) para True. Se os dados aparecerem no ListView, então todas as ligações estarão corretas. É provável que a imagem não esteja mostrando, se isso ocorrer, acesse a propriedade ItemAppearanceObjects do ListView. Abra então ItemObjects e dentro dela a propriedade Image. Marque True na propriedade Visible (Figura 8).

Figura 8. Deixando a imagem visível

A aba Detalhe também precisa ser “lincada” nos campos da tabela, então para isso localize ainda na janela do Binding os componentes Label que adicionamos para serem, respectivamente, TITULO e DESCRICAO. Arraste os campos TITULO e DESCRICAO para a propriedade TEXT desses componentes. Também arraste o campo BITMAP da query para a propriedade de mesmo nome no componente imgFotoDetalhe.

A tela final se parecerá com a Figura 9.

Figura 9. Binding Final

---

Codificando a troca de foto

Agora precisamos apenas fazer com que ao clivarmos na imagem, sejamos indagados pelo método de troca de figura: Biblioteca ou Nova Foto. Nós usaremos o componente TfgActionSheet da suite de componente FGX. Caso não possua esses componentes instalados, leia nosso Tutorial: Mostrando o progresso de uma tarefa usando os componentes FGX para aprender como instalar no Delphi. Esses componentes são totalmente FREE.

Coloque um componente desse em tela e clique duas vezes na propriedade Actions dele. Uma nova janela se abrirá. Agora clique no botão New (único botão ativo). Uma ação será adicionada. Clique nela e na propriedade Caption, adicione o texto “Foto da Câmera”. Repita esse processo para adicionar uma nova ação e insira o Caption “Foto da Biblioteca”.

Na propriedade Action de cada ação criada no fgActionSheet, ligue-o a respectiva ação criada no ActionList, ou seja, uma ação para buscar a foto no diretório do smartphone e outra ação para acionar a câmera do aparelho.

O que estamos fazendo aqui é bem simples. Nós chamaremos o método Show do componente fgActionSheet para que mostre ao usuário uma espécie de diálogo onde terá duas opções: Foto da Câmera ou Foto da Biblioteca. Desse modo poderá escolher como adicionar uma nova figura ao produto. Quando o usuário tocar em uma das escolhas, nós chamamos a ação correspondente. Talvez seja necessário personalizar a propriedade CustomText em cada ação no ActionList e também.

Clique duas vezes sobre o componente ActionList e em seguida encontre as ações correspondentes a foto, elas ficam na categoria Media Library. Clique em actFotoDaCamera e em seguida localize o evento OnDidFinishTaking. Dê dois cliques nele. Codifique como abaixo:

?

1 2 3 4 5 6

if not (qryProdutos.State in dsEditModes) then     qryProdutos.Edit;     qryProdutosFOTO.Assign(Image);      qryProdutos.Post;

Esse evento é acionado quando usuário seleciona uma foto na biblioteca se a ação for esta ou quando ele termina de tirar uma nova foto. Repita exatamente esse código no evento OnDidFinishTaking da ação actFotoDaBiblioteca. A segunda linha gravará o registro na tabela Produtos.

A última providência a se tomar é lançar o diálogo em tela para que o usuário possa escolher como trocar a foto. Para isso, acesse a aba de Detalhe e clique duas vezes no evento OnClick na imagem, ou seja, do imgFotoDetalhe. Codifique como abaixo:

?

1 2 3 4

if not (qryProdutos.State in dsEditModes)  then   qryProdutos.Edit;   fgActionSheet1.Show;

Bem simples de entender. Nós primeiro verificamos se a query está em modo de edição. Para usar a constante dsEditModes, adicione Data.DB na cláusula Uses do formulário. Em seguida chamamos o método Show do fgActionSheet como já havíamos mencionado anteriormente.

---

Distribuindo o banco e testando o aplicativo

Reta final. Agora precisamos configurar o Delphi para enviar o nosso banco de dados para o aparelho e testar tudo que fizemos até agora. Então acesse o menu Project > Deployment. Selecione o Target Debug configuration – Android platform como na Figura 10.

Figura 10. Selecionando o Target

Encontre o botão Add New File, clique nele e localize o banco de dados. Adicione ele e em seguida configure a coluna Remote Path inserindo o caminho do banco no dispositivo “.\assets\internal\”, sem aspas como na Figura 11.

Figura 11. Configuração do caminho do banco no mobile

Para finalizar a aplicação, acesse o evento OnCreate do formulário e digite o código abaixo:

?

1 2	tbctrlPrincipal.ActiveTab := tbitemListagem; qryProdutos.Active        := True;

O que estamos fazendo nesse momento é ativar a TabItem Listagem como principal e abrimos a tabela de produtos para podermos ver os dados no ListView. Feche a qryProdutos e a conexão com o banco em fdConexao se estiverem abertos. Isso pode causar problemas. Por fim, compile e execute o aplicativo no Android. Veja o resultado nas Figuras 12 e 13.

Curta e Compartilhe: Agora que você chegou até o fim desse tutorial, clique em Curtir e compartilhe nas suas redes sociais. Isso faz com que o blog cresça cada vez mais. Também clique nas estrelas no topo do artigo e dê a sua nota.

Figura 12. Tela inicial do aplicativo

Figura 13. Capturando foto no Detalhe

---

Conclusão

Como pudemos ver em nosso tutorial, gravar fotos no banco de dados é extremamente fácil. O campo IMAGE do SQLite é totalmente compatível com fotos da biblioteca ou da câmera do smartphone. Na parte II desse artigo, veremos como enviar a foto capturada no banco de dados local, para um banco de dados remoto.

Baixe o código-fonte completo

fonte : http://www.tdevrocks.com.br