Base64 es un sistema de codificación que convierte cualquier dato a una representación que puede ser formada por los caracteres ASCII (los cuales son 64).
Veamos cómo podemos trabajar con base64 en JavaScript
No necesitamos instalar un paquete o incluir un script, las funciones ya vienen incluidas nativamente. Eso sí, vienen en el navegador pero me parece que no están disponibles con Node.JS del lado del servidor.
De esto se encarga la función btoa. Quiere decir “Binary to ascii” y bueno, convierte datos binarios o cualquier tipo de dato a una representación imprimible.
Recibe una cadena de datos binarios y devuelve igualmente una cadena, pero codificada.
Su uso es realmente sencillo:
let nombre = "parzibyte.me/blog";
let codificado = btoa(nombre);
console.log(codificado);
Lo ejecutamos y esta es la salida:
Claro que no podemos únicamente convertir cadenas, de hecho podemos codificar, por ejemplo, una foto como vimos en este tutorial para tomar una foto con la webcam desde JavaScript.
Ahora entra la función atob, que quiere decir “ASCII to binary”. Recibe una cadena que está codificada con base64 y devuelve los datos binarios.
Probemos con la cadena “cGFyemlieXRlLm1lL2Jsb2c=”:
let cadena = "cGFyemlieXRlLm1lL2Jsb2c=";
let decodificado = atob(cadena);
console.log(decodificado);
Este es el resultado:
Cabe mencionar que esta codificación no es segura, es decir, no es un método de encriptación o hasheo.
Tampoco comprime datos, de hecho los hace más largos.
Base64 funciona bien para representar una URL, por ejemplo para mostrar una imagen o PDF directamente en un enlace.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios