Site icon RibosoMatic

ImageInfo: obtener información de una imágen con JavaScript

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>

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

Vía Ajaxian

Blog del autor Nihilogic