Parzibyte's blog

Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.

Webpack convierte imagen a base64

En este post vamos a hablar sobre el trabajo en imágenes al usar webpack. A veces, webpack convertirá las imágenes a base64 y en otras ocasiones devolverá la ruta de la misma. Esto se puede configurar de acuerdo a tus necesidades, y justamente veremos cómo hacerlo configurando el url-loader.

(más…)

JavaScript: convertir archivo a base64

En el post de hoy veremos cómo convertir un archivo (seleccionado en un input de tipo file) a su representación en base64 como cadena usando JavaScript.

Técnicamente hablando, vamos a convertir un File a un string en base64 usando FileReader.

Aunque base64 ocupa más tamaño que el archivo original, en ocasiones es necesario convertir un fichero binario a este formato para su fácil transporte o almacenamiento.

Nota: en este ejemplo aprenderás a convertir un archivo seleccionado en un input, pero puedes hacer lo mismo con un archivo recuperado del OPFS o incluso un archivo descargado con fetch; las posibilidades son infinitas.

(más…)

Rotar imagen en navegador web con JavaScript y canvas

En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad.

Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera.

(más…)

Firma digital con Go y RSA

El día de hoy vamos a ver cómo firmar y verificar un mensaje con Golang y un par de claves RSA.

Es decir, por un lado veremos cómo firmar digitalmente un mensaje usando una clave privada y por otro lado vamos a ver cómo comprobar la autenticidad de dicho mensaje.

Recordemos que las firmas digitales tienen el propósito de comprobar la autenticidad de un mensaje, no de ocultarlo (de eso se encarga la criptografía).

Veamos entonces cómo firmar y verificar firmas con Go.

(más…)

Golang: convertir base64 a imagen

En este post te mostraré cómo convertir una cadena en base64 a una imagen de Go. Específicamente convertiremos un string de la imagen en base64 a un objeto tipo image.Image.

Una vez que tengamos la imagen como image.Image entonces podemos escribirla en el disco duro, manipularla o hacer cualquier otra cosa.

(más…)

Encriptación con JavaScript del lado del cliente usando la Web Crypto API

En este post de programación con JavaScript en el navegador veremos cómo encriptar y desencriptar datos usando una API nativa, segura y confiable.

Encriptar y desencriptar información con JavaScript usando AES

Encriptar y desencriptar información con JavaScript usando AES

Vamos a usar la interfaz Crypto a través de window.crypto. Al final podremos encriptar y desencriptar archivos usando una contraseña, derivando una clave de la misma y usando AES para el cifrado de datos.

Nota: voy a usar cifrado y encriptado como sinónimos para referirme a la encriptación de información.

Por cierto, usaremos la encriptación simétrica aunque también es posible usar la asimétrica con claves públicas y privadas.

(más…)

Enviar canvas de JavaScript a PHP

En el post de hoy te mostraré una cosa sencilla pero muy útil: cómo enviar un canvas de HTML a PHP usando JavaScript, para guardar ese canvas como imagen.

Cuando digo que es útil es porque yo creo que canvas nos da varias posibilidades de trabajar con imágenes o con el canvas en sí, y gracias a lo que te mostraré podrás guardar el resultado en el servidor para cualquier cosa.

Se me ocurre que por ejemplo podrías tomar una foto de una credencial de identificación, recortarla y después guardarla con PHP.

(más…)

JavaScript – Descargar canvas como imagen

En mi blog te he mostrado cómo descargar un canvas de HTML y JavaScript como PNG, pero no te mostré cómo hacerlo en otro formato.

Por ello es que en este post te mostraré cómo descargar un canvas como imagen ya sea PNG o JPG, respetando el tipo MIME image/jpeg o image/png.

(más…)