JavaScript

Cómo mostrar imágenes TIFF en Web

En algunos sistemas de gestión  de imágenes de modo masivo se suele usar este formato para aligerar el peso de las imágenes y de ahí sale la pregunta. Cómo mostrar imágenes TIFF en Web.

Si necesita mostrar archivos TIFF en la web, es posible que tenga problemas. Los archivos TIFF solían mostrarse en todos los navegadores, pero como no son realmente adecuados para el uso web, el soporte ha ido disminuyendo. Consulte compatibilidad con imágenes por navegador:

Mostrar archivos TIFF en Chrome y Firefox

  1. Descargue el archivo UTIF.js desde su repositorio oficial.
  2. Declarar el archivo UTIF.js dentro de la etiqueta <head></head>
    <script src="UTIF.js"></script>
  3. Agregar el atributo onload en la etiqueta <body> <body onload="UTIF.replaceIMG()">
  4. Usar una etiqueta <img> y agregar una imagen TIFF <img src="./paisaje.tiff" />

Por defecto las imágenes TIFF no son compatibles con los navegadores web y si agregamos una imagen a la etiqueta <IMG> mostrara error (no lo detecta y mostrará como si la imagen no existiera en el disco)

Ademas. Si ponemos la ruta del archivo TIFF en el navegador se iniciara una descarga en vez de visualizarla.

A continuación, veremos 2 formas para poder mostrar imágenes TIFF en el navegador.

Primer ejemplo: Usando UTIF.js

Si tienes una necesidad legítima de mostrar este formato. Podemos usar esta librería y forzar que la etiqueta <img> lea el formato y lo visualice en el navegador web..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mostra images tiff en web</title>
<script src="UTIF.js"></script>
</head>

<body onload="UTIF.replaceIMG()">

<img src="./paisaje.tiff" />
</body>
</html>

Segunda forma: usando canvas

Otra forma mas moderna es usar canvas en la visualización de imágenes TIFF en el navegador, para lograr este objetivo necesitamos algunos requisitos:

  1. Liberia jQuery
  2. Código tiff.js es un puerto de LibTIFF mediante la compilación del código LibTIFF C con Emscripten.
  3. Canvas

Esta según opción nos permitirá visualizar imágenes de una carpeta o directorio web. Por ende, para lograr tal acción nos apoyaremos del ciclo for

Fichero index2.html

<!doctype html>
<html>
  <head>
    <title>tiff.js demo</title>
  </head>
  <body>
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="./tiff.min.js"></script>
    <script type="text/javascript">
$(function () {
  var imageFiles = [
    'ajies.tiff',
    'paisaje.tiff'
  ];


  var loadImage = function (filename) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', filename);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
      var buffer = xhr.response;
      var tiff = new Tiff({buffer: buffer});
      var canvas = tiff.toCanvas();
      var width = tiff.width();
      var height = tiff.height();
      if (canvas) {
        var $elem = $('<div style="float:left"></div>');
        $elem.append(canvas);
        $('body').append($elem);
      }
    };
    xhr.send();
  };


  for (var i = 0, len = imageFiles.length; i < len; ++i) {
    loadImage('images/' + imageFiles[i]);
  }
});


    </script>
  </body>
</html>

Salida en el navegador

Para finalizar.- Con estos 2 ejemplos podemos usarlo en el navegador Firefox y Google Chrome. Recordemos que estas imágenes mantienen la calidad y ademas podemos comprimidlas sin ocupar mucho espacio en el disco.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.
Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad