ImageInfo es una pequeña librería JavaScript que obtiene la información ó metadatos (formato, dimensiones, etc) de los archivos de imágen. Basado en IMG2JSON.

Bastará con incluir los archivos JavaScript necesarios en la cabezara de nuestro documento HTML. Pueder ver en el siguiente ejemplo la forma de usar esta librería.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reading image's info</title>
<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js" ></script>
<script type="text/javascript" src="exif.js" ></script>

<script type="text/javascript" >
	// URL de la imagen (debe estar en el mismo dominio)
	var file = "london-olympic-logo.gif";
	
	// define tu propia función de respuesta
	function mycallback() {
		document.getElementById('info1').innerHTML = "Todo la informacion: " + ImageInfo.getAllFields(file).toSource()
	   	document.getElementById('info2').innerHTML = "Formato: " + ImageInfo.getField(file, "format") + ", Dimensiones : " + ImageInfo.getField(file, "width") + "x" + ImageInfo.getField(file, "height")
	}
	
	// Finalmente mostrar la informacion de la imagen
	ImageInfo.loadInfo(file, mycallback);
</script>
</head>

<body>
    <img src="london-olympic-logo.gif" alt="Imagen" height="126" width="210"  />
    <h3>Informacion de la imagen</h3>
    <div id="info1">
    </div>
    <div id="info2">
    </div>
</body>
</html>

ImageInfo libreria JavaScript

Con el método getField podemos obtener información específica de la imagen. He aquí otros valores para getField:

  • format (formato de la imagen el cual puede retornar: "JPEG", "PNG", "GIF" or "BMP")
  • version (actualmente solo para formatos GIF)
  • width (ancho en píxeles)
  • height (altura en píxeles)
  • bpp (bits por píxel)
  • alpha (retorna verdadeo si el canal alpha está presente, solo para formato PNG)
  • mimeType (el tipo mime enviado por el servidor)
  • byteSize (tamaño del archivo)
  • exif (si la imagen contiene datos EXIF. Solo en formato JPEGs)

Vía Ajaxian

Blog del autor Nihilogic