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 🙂