Como criar um BLOB a partir de uma string base64 em JavaScript

Neste artigo você vai aprender a como criar um BLOB a partir de uma string base64 em JavaScript, a partir de uma maneira super simples!

Fala programador(a), beleza? Bora aprender mais sobre BLOB, base64 e JavaScript!

Para resolver nosso problema, vamos utilizar a função fetch

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

A partir da string de base64, que você deve ter armazenada em uma variável

Há um método chamado blob em fetch, que nos retorna a nova string

Desta maneira resolvemos nosso problema de forma super simples

Veja o exemplo prático do código:

const base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI33D5//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

async function createBlob(base64) {
	let res =	await fetch(base64)
	let myBlob = await res.blob()
  
  console.log(myBlob)
} 

createBlob(base64)

Note que criamos uma função chamada createBlob

Nela executamos o fetch e também a função blob, que vai nos retornar os dados do BLOB

Em console.log podemos observar toda as suas propriedades

A partir daí você pode escolher o que fazer com a transformação

Conclusão

Neste artigo você aprendeu a como criar um BLOB a partir de uma string base64 em JavaScript

Utilizamos a fetch API, junto da função blob

Isso nos dá um objeto com os dados do BLOB, a partir de uma string base64

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!