DEVROOT /$ _

1. Data urls intro
2. btoa atob function
3. Conversor Base64

Intro

Recurso muito para embutir imagens no código HTML sem precisar referenciar link de um arquivo de imagem.

É necessário converter para Base64, uma forma de codificação sem caracteres, essencial para lidar com transferencia de dados por meio de textos.

Exemplos de tipos:

Texto simples:

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

Texto html:

data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E

Imagem Jpeg:

data:image/jpeg;base64,/9j/4AAQS...

Arquivo SVG:

data:image/svg+xml;base64,PHN2Zy...

Exemplo:

Arquivo SVG

<svg width="100" height="100" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Convertendo para base64:

<img title="smile.jpg" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiB
oZWlnaHQ9IjEwMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0
dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvM
Tk5OS94bGluayI+DQoJPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iZ3JlZW
4iIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ieWVsbG93IiAvPg0KPC9zdmc+" />

Resultado:

btoa atob function

Funções JS para codifificar e decodificar base64

let text = "Hello World!";
let encoded = window.btoa(text);
let decoded = window.atob(encoded);

console.log(encoded);
console.log(decoded);

Resultado:

SGVsbG8gV29ybGQh

Hello World!

Conversor base64