Conversor de imagenes a Base64


He creado una pequeña utilidad para convertir imágenes png en base64. Este es un sistema que permite incrustar imágenes en una pagina web directamente codificadas en forma de texto, en vez de tenerlo en un archivo a parte. Hablando "en código", seria algo como esto:


<!--- Imagen en archivo aparte --->
<img src="./image.png" alt="image"/>
<!--- Imagen en base64 --->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtA
AAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABoSURBVFhH7dixDYAwDABBhwEYLgshFkIMRY
+UBaBxQ5HqJeTir4nLlyI3bvd1PlHYkm9ZBlIGUtMt3o81p39sfeT05RdTBlIGUgZSBlIGUgZSBl
IGUgZSBlIGUgZS5QO9sFIGUgYyES9xhA3UXdTL/AAAAABJRU5ErkJggg==" alt="image"/>

Dando como resultado esto:
Imagen en archivo aparte
Imagen en base64

Como se puede ver el resultado es el mismo en ambos casos.
Su principal ventaja es que al no cargar las imágenes de un archivo externo se reduce el numero de peticiones al servidor. Sin embargo tiene la desventaja de que, en relación con el archivo original, los datos codificados ocupan mas, y por ello la propia pagina web. Por ejemplo, las dos imágenes que utilizo arriba: mientras que en png ocupa 190 bytes, en base64 ocupa 280 bytes. Aun así puede ser muy útil en aquellos casos en los que por ejemplo queramos reducir el numero de archivos que componen una web (o tener directamente un solo archivo), como puede ser hospedando una web en dropbox.

En una búsqueda rápida en Google aparecen decenas de conversores de estos, entonces ¿porque hacer uno mas? Principalmente por dos razones: primero, porque muchos de ellos hacen la conversión a través de una petición al servidor lo que no me asegura que se guarden una copia de mi imagen; segundo, la satisfacción de un programador de crear sus propias herramientas .

He hecho la aplicación con la ayuda de varios ejemplos y empleando AngularJS. Su funcionamiento es simple: seleccionamos la imagen, apretamos "Generar texto base64" y aparecerá el texto en base64 correspondiente. Como pequeña utilidad he incluido la posibilidad inversa, la de mostrar una imagen a partir de un código en base64 (introduciéndolo en el cuadro de texto y pulsando en "Generar imagen").

La aplicación y el código se encuentran disponibles en GitHub.

Enlace:
Conversor Base64 - Aplicación 
Conversor Base64 - Código

Referencias:

http://stackoverflow.com/questions/2966076/getting-file-size-in-javascript
http://stackoverflow.com/questions/7977084/check-file-type-when-form-submit
http://jsfiddle.net/handtrix/xztfbx1m/
https://davidwalsh.name/convert-image-data-uri-javascript
http://odetocode.com/blogs/scott/archive/2013/07/05/a-file-input-directive-for-angularjs.aspx http://www.iteramos.com/pregunta/20251/carga-de-archivos-utilizando-angularjs
http://jsfiddle.net/f8Hee/
https://github.com/alexk111/ngImgCrop/issues/93

Comentarios

Entradas populares de este blog

Obtener provincia a traves del codigo postal con Javascript

GUI en Python con Glade