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:
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),
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
Publicar un comentario