Obtener el contenido URI de cualquier imagen

obtener contenido base 64 de una imagen rápidamenteÚ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”)

inspeccionar elementos página weby 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

snifar tráfico de red con el navegador mozilla firefoxFiltramos las imágenes (para que resulte más sencillo encontrar la que queremos)

filtrar imágenes descargadas por el navegadory seleccionamos (botón derecho sobre la foto que nos interesa) la opción “Copiar imagen como URI de datos”

obtener contenido base64 de cualquier imagenY 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.

12 comentarios en “Obtener el contenido URI de cualquier imagen

  1. Alberto dijo:

    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.

  2. Swicher dijo:

    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.

  3. luqueti dijo:

    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!.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s