Codificando, renderizando e fazendo download de uma imagem em base64 com javascript

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 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s