Fala pessoal, esta semana tive de desenvolver uma funcionalidade bem bacana no projeto que estou atuando, como achei interessante gostaria de compartilhar este conhecimento.
Então vou ensinar vocês:
– Converter uma imagem para base64
– Renderizar a imagem na sua página
– Fazer o download
Mas o que é base64?
Base64 é um método para codificação de dados para transferência na Internet (codificação MIME para transferência de conteúdo). É utilizado frequentemente para transmitir dados binários por meios de transmissão que lidam apenas com texto. Por exemplo os envios de anexos por e-mail utilizam este método.
Convertendo arquivo de imagem em base64
Primeiramente vamos escrever o código html para fazer o upload do arquivo:
<div>
<label>Selecione uma imagem</label>
</div>
<div>
<input type="file" accept="image/*" (change)="processar($event)">
</div>

O método processar é responsável por interpretar o arquivo de imagem que fizemos upload, então é onde iremos aproveitar para converter nosso arquivo e recuperar as informações para podermos renderizar/fazer download do mesmo:
arquivoSelecionado: string; // guardará o src da imagem para renderizar arquivoFormatado: string; // guardará o valor codificado em base64 arquivoNome: string; arquivoExtensao: string; processar(event) { // Recuperando a imagem, por padrão vem em uma lista const file = event.target.files[0]; // Recuperando o nome do arquivo e extensão const arquivo: string = event.target.value; // Removendo o path C:\fakepath\ do nome da imagem this.arquivoNome = arquivo.split('.')[0].slice(0, 12); this.arquivoExtensao = arquivo.split('.')[1]; // Objeto responsável por interpretar um arquivo const reader = new FileReader(); // Este evento é chamado cada vez que a operação de leitura é completada com sucesso reader.onload = this._handleReaderLoaded.bind(this); // Inicia a leitura do conteúdo do Blob(objeto do tipo arquivo) especificado, uma vez finalizado, o atributo result conterá os dados raw binários do arquivo como string reader.readAsBinaryString(file); } _handleReaderLoaded(readerEvt) { // o método btoa codifica em base64 const base64 = btoa(readerEvt.target.result); this.arquivoFormatado = base64; // src para renderizar a imagem this.arquivoSelecionado = "data:image/jpeg;base64," + base64; }
Exemplo de arquivo convertido em base64:

Renderizando a imagem
Agora que já temos nosso arquivo codificado em base64, conseguimos renderizar a imagem na nossa página, utilizando a variável arquivoSelecionado.
<div class="d-flex justify-content-center">
<img [src]="arquivoSelecionado" alt="Selected Image"/>
</div>

Fazendo download do arquivo
Primeiro vamos criar o HTML do botão:
<button type="button" class="btn m-btn--air btn-outline-primary btn-sm mr-2" (click)="download()">
<span>Download</span>
</button>

Agora vamos para o código responsável pelo download:
download() { // o metodo atob decodifica base64 const binaryString = atob(this.arquivoFormatado); const bytes = new Uint8Array(binaryString.length); // convertendo em array buffer do tipo Uint8Array const arrayBuffer = bytes.map((byte, i) => binaryString.charCodeAt(i)); this.criarArquivoParaDownload(arrayBuffer); } criarArquivoParaDownload(body) { // A partir do array buffer criamos o arquivo para download const blob = new Blob([body]); const fileName = `${this.arquivoNome}.${this.arquivoExtensao}`; // Validação para navegadores if (navigator.msSaveBlob) { // IE 10+ navigator.msSaveBlob(blob, fileName); } else { const link = document.createElement('a'); // Navegadores que suporta atributo de download do HTML5 if (link.download !== undefined) { // criando um atributo hidden, para simular o click e disparar o download const url = URL.createObjectURL(blob); link.setAttribute('href', url); link.setAttribute('download', fileName); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } }
Clicando agora no botão de Download, o arquivo será baixado pelo seu navegador!
Com isso terminamos o nosso post de hoje!
Espero que este material sirva de apoio para vocês algum dia 🙂