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 🙂
