Últimamente ando generando automáticamente baterías de ejercicios aleatorios de matemáticas para Moodle con Python y plantillas y se me presentaba la necesidad de utilizar imágenes “inline”.
Aunque existen multitud de servicios online para obtener la codificación base64 de cualquier fichero de imagen, existe la posibilidad de obtenerlo fácilmente sin tener que instalar software adicional ni la necesidad de subir tus archivos a servidores de terceros (que no tienes por qué dar problemas pero a saber las intenciones de quienes los gestionan ¿no os parece? 😉 )
Gracias al navegador web (en mi caso utilizaré Firefox) abriremos las herramientas de desarrollo (haciendo clic derecho sobre cualquier elemento de la página web que nos interesa “trastear” y seleccionando la opción “inspeccionar elemento”)
y buscamos el apartado “Monitor de red” (el atajo de teclado es CTRL+SHIFT+Q y te ahorras hasta el paso anterior) que es la última de las pestañas de las herramientas de desarrollado
Filtramos las imágenes (para que resulte más sencillo encontrar la que queremos)
y seleccionamos (botón derecho sobre la foto que nos interesa) la opción “Copiar imagen como URI de datos”
Y ya tenemos los datos de nuestra imagen, listos para ser utilizados en cualquier página html que nos interese con un simple
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB=="/>
Conclusión
Forma sencilla de obtener el contenido de cualquier imagen sin necesidad de instalar software adicional ni depender de servicios online de terceros.
A mí a veces hay imágenes que se me resisten en el inspector de elementos a ser encontradas. A veces no están en las imágenes. Algunas veces he tenido la suerte de verlo en el código el enlace, pero otras veces no.
El arte de filtrar con propiedad 😉
¿Me proporcionas un ejemplo para “jugar”?
me ha pasado en muchos sitios. Este es el último: https://mp3cut.net/es/
Quiero la imagen de “cortar audio”.
Si voy al código me aparece: i class=”icon9 icon-acutter” pero no consigo la imagen me ponga como me ponga. Obviamente en estos casos hago una foto de pantalla, pero la imagen tiene que estar en algún sitio…
lo máximo que consigo es entrar en el css donde tiene que estar la imagen.
https://mp3cut.net/shared/css/sites/acutter/acutter.css?ce40b37
Esa página en concreto usa “sprites css” para la gestión de imágenes como técnica de optimización, de ahí que te cueste encontrarlo
¿Alguna idea?
¿Preguntas si sé cómo sacarte el icono o cómo extraer imágenes de sprites css?
Ambas 😀
Eres “insaciable” voy a tener que sacar tiempo y dedicarle un artículo ¿qué os parece? 😉
Cuando necesito convertir una imagen antes lo que solía hacer era bajarla (si es un archivo de internet) y luego subirla a duri.me pero desde que estoy migrando a Linux logre hacer esta función en Bash para lo mismo. Como funciona igual que un alias, para llamarla basta con “file2base64 /ruta/al/archivo”.
Ciertamente este truco me sera bastante útil para agilizar el proceso con algunas imágenes.
Muy buen aporte e interesante solución (con su wget y todo 😉 )
Gracias por compartirla compi
Lo de la pagina de mp3cut no es una imagen, sino una fuente…. al mejor estilo fontawesome
(no me puse a buscar la declarción de la fuente, pero estoy 99% seguro, bah por ahi un 90%)
Saludos!.