El diario de Pepe Molina (Caricatos)

• Webmaster Pepe Molina
• Su Caricatura.com
• facebook
• Google+
• twitter

• Caricaturas "San Jorge"
• The Irish Affair (Pub)
• Construcciones Costa del Sol
• Polígonos Costa del Sol
• Red Tape

• Javascript Códigos (por Tunait)
• Centell: Diseño Gráfico...
• Recursos CSS
• Utilidades para Webmasters
• Blog de Juaniquillo
• Kseso de CSS

• Desarrollo y Poesía
• Caricaturas "San Jorge"
• Fotografías de Sevilla, España
• Autos con arte
• Medina Colón ArtWork
• AlSaPa
• Juan Ruiz
• AJC Creaciones

• Foros del web
• Maestros del web
• HERA
• Validador de feeds
• Sitemaps
• ISCA
• AEC

• Más Benalmádena
• Animarte
• Los Pescadores Playa
• Gráfica creativa
• MiniGolf Happy Days

• Prociencia
• Universidad Autónoma de Barcelona
• Pekegifs
• Publica tus poemas
• Cherrylandia
• Granada Links
• Desenvolvimento web
• El blog del Vinagre Asesino
• Bahía Sin Fondo
• Las historias eulerianas
• webfly

Publicado el día 09 de abril de 2013
id=119; categorías: Vicisitudes de un Webmaster

Seguimos tratando sobre imágenes, pero en este caso sin necesidad de que existan físicamente, sino insertando directamente el contenido en una etiqueta html o svg.

La imagen que acompaña estos párrafos se encuentra en una etiqueta "img" del lenguaje html, pero también es posible usar otras etiquetas como ya hemos visto para imágenes svg en el apunte Rotando imágenes con svg (donde nos olvidamos de citar la etiqueta embed, que si bien está desaconsejado su uso, es reconocida por los navegadores). Por cierto, hemos modificado el código fuente para embeber la imagen al igual que en este mismo apunte.

El código

Sólo cuatro (4) líneas de código en el lenguaje php:

	$url = "http://www.pepemolina.com/logo.png";
	$datos_imagen = getImageSize($url);
	$mime = $datos_imagen["mime"];
	$contenido = base64_encode(file_get_contents($url));

Y de esas pocas líneas, podemos omitir tres (3), ya que sabemos el valor correspondiente a la variable $mime. En la página quedaría así:

<img src="data:<?=$mime;?>;base64,<?=$contenido; ?>"/>

Para obtener el código de cualquier imagen, basta con usar su propia url, o crear una aplicación que permita seleccionar la imagen.

El recurso

Para crear el recursos que permita obtener el código para insertar cualquier imagen basta con un pequeño formulario para rellenar con la url de la imagen y asignársela a la variable $url, y un control (textarea) para mostrar el código resultante.

Al igual que otros recursos que hemos compartido, hemos creado un fichero con extensión "txt": imagen_data.txt, y desde otro fichero php lo incluímos para su uso: imagen_data.php.

También podemos embeber imagenes svg como la que tenemos a continuación, aunque existiendo la posibilidad de usar directamente una etiqueta svg en la página, no tiene mucho sentido.

Antes de usar este recurso debemos pensar si nos será de utilidad, ya que puede incrementar el peso de la imagen innecesariamente, aunque a la vez evitaremos problemas con las imágenes que tengan una ubicación provisional.

Este apunte aún no tiene comentarios.

• Este diario: Extras
• Caricaturas en Córdoba
• Mapa de España
• Desafío javascript: 100!
• Clip-art: carpetas y ficheros
• Sistema de comentarios paso a paso: Validar con javascript
• javascript: rollover en mapas
• SVG: Mapa de España
• Mapa de España SVG II: Herramientas
• Fondos con SVG

• Caricaturas en Córdoba
• Mapa de España SVG II: Reflexiones
• Mapa de España SVG II: Herramientas
• Mapa de España SVG II: Vicisitudes
• SVG: Zoom en mapa de imagen
• SVG: Dibujando mapas
• Mapear una imagen paso a paso
• Mapas y formularios
• Asociación Española de Caricaturistas
• Clip-art: carpetas y ficheros

• Caricatos ⁽²⁰⁾
• Así se hizo ⁽⁴¹⁾
• Vicisitudes de un Webmaster ⁽¹³⁶⁾
• Mentes pensantes ⁽⁹⁾
• Eventos y efemérides ⁽⁹⁾
• Globalización ⁽⁶⁶⁾
• Mamarrachadas ⁽⁶⁾
• Artes y oficios ⁽¹²⁾
• Programación ⁽¹¹²⁾
• Caricaturas y caricaturistas ⁽¹⁵⁾
• Experiencias SEO ⁽¹¹⁾

• listado de caricaturas
• listado de imágenes
• listado de extras
• listado de categorías
• listado de etiquetas
• listado de postales
• grupos de apuntes
• buscador interno
• anuario 2010
• anuario 2011
• anuario 2012
• anuario 2013
• anuario 2014
• anuario 2015
• anuario 2016
• anuario 2017
• anuario 2018
• anuario 2019
• anuario 2020
• anuario 2021
• anuario 2022
• anuario 2023
• anuario 2024

• Arrays javascript
• Capturar áreas
• Colección de clipart
• Editor de textos
• Editor del diario
• Galeria de imágenes
• Generador html
• Imagenes
• Máquina de Turing
• Postales digitales
• Probador de scripts
• Recortes en imágenes
• Reloj analógico
• Sudo-Captcha
• Todo sobre los colores
• Libro de visitas

2017 (7)

• diciembre (2)
• abril (1)
• marzo (1)
• febrero (1)
• enero (2)

2016 (2)

• abril (1)
• marzo (1)

2015 (6)

• mayo (1)
• abril (1)
• marzo (2)
• febrero (1)
• enero (1)

2014 (12)

• diciembre (1)
• noviembre (1)
• julio (2)
• junio (1)
• mayo (1)
• abril (1)
• marzo (1)
• febrero (1)
• enero (3)

2013 (20)

• diciembre (2)
• noviembre (1)
• octubre (1)
• septiembre (1)
• agosto (1)
• junio (1)
• mayo (2)
• abril (2)
• marzo (1)
• febrero (3)
• enero (5)

2012 (45)

• diciembre (3)
• noviembre (6)
• octubre (2)
• septiembre (4)
• agosto (2)
• julio (2)
• junio (3)
• mayo (4)
• abril (3)
• marzo (6)
• febrero (5)
• enero (5)

2011 (62)

• diciembre (5)
• noviembre (9)
• octubre (6)
• septiembre (6)
• agosto (3)
• julio (2)
• junio (5)
• mayo (4)
• abril (2)
• marzo (5)
• febrero (7)
• enero (8)

2010 (1)

• diciembre (1)