Aplicación

Ejecución

Imagen


Información archivo:
Suma tamaños originales:

	Edición		Compo- sición		Base64		Imagen		Sprite CSS
Ruta original: [?] La limitación del navegador para no mostrar la ruta completa del archivo que se carga obliga a modificar, en su caso, la ruta de la imagen cargada. Por defecto se toma la carpeta declarada en la pestaña Sprite CSS. Si la imagen no se cargó desde ahí habría que modificar aquí la carpeta. Esto sólo es necesario a efectos de generar el CSS con el selector data-X-src. (Usar rutas relativas desde la carpeta raíz) Conservar proporción original Capa Resaltar transparencia Color clave Red Green Blue Contenedor × px Horizontal Vertical Ajustar contenedor Separarpx Abrir archivo con una composición guardada [?] Al activar esta opción puede seleccionar un archivo de texto con los datos de una composición guardada, cuyo contenido se vierte en el control siguiente para luego poder ser extraido. También puede arrastrar un archivo de texto hasta el área de imágenes. Para volver a utilizar la carga de imágenes debe desactivar esta opción. [?] Con cargar leemos el texto y lo convertimos en una composición de imágenes Con extraer hacemos el proceso inverso. Para guardar esta composición seleccione el texto para luego copiarlo y pegarlo en un archivo de texto externo. Esta aplicación no contempla guardar directamente en los archivos de su ordenador. Imagen seleccionada en base64 [?] Aquí se reproduce la imagen seleccionada en la composición codificada en base64. También puede copia una imagen en base64 externa, pegar el texto en este cuadro y con este botón agregarlo al contenedor como una nueva imagen. En cualquier caso al actuar con este botón se carga el base64 como una nueva imagen, por lo que también es una forma de duplicar una imagen ya existente en el contenedor. [?] Para guardar esta imagen use el menú del navegador o arrástrela hasta una carpeta del ordenador. Si la va a usar como sprite debe ubicarla en la carpeta y nombre que se indica en la pestaña de generación de sprites. Elemento canvas no soportado. Carpeta [?] En esta carpeta estará la imagen del sprite. La ruta debería ser relativa a la raíz del sitio en producción. Nombre [?] La carpeta anterior y este nombre de archivo más la extensión .png forman la ruta del sprite. No agregue extensión pues en cualquier caso siempre se añadirá la anterior. En cada regla usar class[?] Estas tres opciones son optativas pero al menos de las dos primeras tiene que haber una seleccionada. Con class se usa un selector de la forma .imagen-gif usando el nombre del archivo y la extensión tras cambiar el punto por guion. data-X-src[?] Con data-X-src agregamos también el selector *[data-X-src=URL], cambiando la X por el nombre del sprite. La URL será la que cada imagen de la composición tenga guardada en la pestaña edición. Esto nos sirve para modificar los atributos src de los elementos <img> cambiando el nombre a data-X-src y usar un nuevo src que apunte a alguna imagen en blanco. De esta forma CSS se encarga de ubicar la imagen en el background de ese elemento. También puede agregarse a cualquier elemento pues para eso ponemos el selector *. background-image [?] Por último con la opción background-image estando activada significa que agregamos la ruta del sprite a cada regla. La otra opción es no activarlo y entonces se agregará la regla *[data-X-src]{background-image: ....;} , con lo que cualquier elemento que contenga ese atributo será procesado con CSS incorporando la imagen. igual dimensión [?] Si todos los sprites son del mismo tamaño podemos ponerlo en la declaración general en los casos en que la opción anterior esté desactivada. Marca tiempo [?] Agrega al nombre del archivo en la declaración general una marca de tiempo. [?] Para guardar este CSS seleccione el texto para copiarlo y pegarlo en un archivo de estilo CSS. También generamos una lista de rutas de las imágenes originales. Esto nos servirá para buscar los elementos <img> y reemplazar, por ejemplo, <img src="/res/img/abc.gif" ... /> por <img data-X-src="/res/img/abc.gif" src="blanco.gif" ... />, donde blanco.gif es una imagen con un fondo transparente o cualquier otra cosa que deseemos poner para evitar tener un <img> sin src. Lista de imágenes:

Una herramienta para varios usos

Esta aplicación es una herramienta para componer imágenes, que trabaja on-line sin acceder al servidor en ningún caso. Podemos realizar una composición de varias imágenes, cargándolas desde el ordenador, posicionándolas y/o redimensionándolas con el selector de áreas. También podemos ubicarlas en diferentes capas. Permite alinearlas ordenadas por tamaños con la finalidad de que la composición ocupe el menor tamaño posible. A partir de ahí podemos generar el Sprite CSS. La estructura de la composición puede extraerse como un archivo de texto plano para posteriormente volver a cargar esa composición. La aplicación trabaja los datos de la imagen en base64 por lo que una finalidad de la misma es convertir una imagen a base64.

A continuación relacionamos los usos posibles de la aplicación:

1. Compositor de imágenes: Podemos insertar imágenes en el área contenedora y ubicarlas en su lugar, cambiar el tamaño y situarlas en diferentes capas. Mediante el botón de seleccionar archivo podemos insertar una imagen. En algunos navegadores que soporten arrastrar y soltar (drag and drop) podemos arrastrar los archivos hasta el área contenedora. Para cargar una imagen es necesario que el navegador soporte la API File. IE8 no lo soporta, pero aún así es posible cargar una imagen si copiamos la misma en base64 (con una aplicación externa) y la cargamos desde esa pestaña.
2. Guardar composición: La composición puede guardarse como una lista de datos en formato texto para modificarla si fuera preciso en un momento posterior. La aplicación puede, en su caso, leer desde archivos de su ordenador, pero en ningún caso puede hacer el proceso inverso, escribir en un archivo del ordenador. Para guardar este texto debe copiarlo y pegarlo en un archivo de texto de su sistema.
3. Base64: Podemos obtener la imagen codificada en base64. También podemos volver a cargar esa imagen como nueva. Es una forma de duplicar una imagen o bien traer desde el exterior una imagen en base64 y cargarla en el contenedor.
4. Guardar imagen compuesta: La imagen de la composición puede extraerse y, mediante el menú de los navegadores para guardar imagen, podemos salvarla en nuestro ordenador. Algunos navegadores permiten también arrastrar la imagen y soltarla en una carpeta. Es necesario que el navegador soporte canvas para realizar esta acción.
5. Sprite CSS: Con la edición de alinear podemos componer una colección de sprites, salvar la imagen y luego generar el Sprite CSS.

Esta aplicación ha sido probada satisfactoriamente en Chrome 22.0, Firefox 15.0 y Opera 12.02. En cambio Safari 5.1.7 e Internet Explorer 8 no soportan la API File y la única forma de cargar un imagen es pegarla como base64 y cargarla desde esa pestaña. Safari soporta Canvas y puede generar la imagen compuesta, pero esto no es posible en IE8. Puede encontrar más información relacionada con las técnicas usadas en esta aplicación en los siguientes enlaces dentro de este sitio:

• En cómo se hacen los Sprites CSS explico con más detalle como generar el CSS para los sprites.
• El tema HTML5: File API expone lo necesario para leer archivos del ordenador, en este caso para cargar imágenes.
• Esta herramienta usa la aplicación del Selector de área o polígono para seleccionar, ubicar y dimensionar las imágenes.
• La estructura de pestañas puede verla en el tema Pestañas con Javascript.
• Sobre Canvas está el tema Introducción al elemento canvas de HTML-5.

Otros enlaces externos:

• La especificación del W3C File provee una API para representar objetos de archivo en aplicaciones web así como seleccionarlos y acceder a sus datos.
• La especificación del W3C Drag and Drop define un mecanismo de eventos basados en drag and drop (arrastrar y soltar).
• Html5Rocks: Reading files in JavaScript using the File APIS de @ebidel [Eric Bidelman], con ejemplos muy prácticos de la API File y de Drag and Drop.
• La especificación del W3C Canvas 2D Context define el contexto 2D para el elemento <canvas> de HTML5.