Convertendo Imagem para base64

Sistema simples que converte imagem para base64 e de base64 para imagem

[click here for English]

Vamos criar uma ferramenta com javascript que converte imagem para base64 e que faz o inverso, transformando base64 em imagem

Código

Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.

Código em HTML

Aqui temos um input do tipo file, nele iremos receber o upload da imagem, temos também um textarea que será onde ficará a imagem em base64, temos também uma tag img onde ficará a prévia da imagem e por fim um botão de download para baixar a imagem.

Agora vamos iniciar a parte do JavaScript.

Código em JS — Part1

Primeiro temos a adição de eventos para o input, textarea e button, posteriormente temos uma variável preview e por fim temos a função previewFile, nesta função usamos o FileReader que nos auxiliar a trabalhar com o carregamento de imagem, após a imagem ter sido carregada(onloadend) adicionamos na preview e o código base64 adicionamos na textarea.

Código em JS — Part2

Agora temos mais duas funções:

• previewText = Aqui pegamos o texto recebido no textarea e adicionamos a preview, convertendo assim base64 para imagem.
• DownloadFile = Aqui fazemos o download da imagem que está aparecendo na preview.

pronto simples assim.

Demo

Veja abaixo o projeto completo funcionando.

Projeto no codepen

Youtube

Se preferi assistir, vejo o desenvolvimento no youtube.

Video no youtube

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊 Até mais! 😊😊