tif格式图片在线浏览

TIFF.js基于JavaScript的的TIFF图像格式解析器，可在浏览器中浏览TIFF图像，就好像它们是真实支持的一样！

TIF格式是一种压缩最小的图片处理格式，基本不损失图象信息，但其缺陷就是文件体积太大，浏览器不能显示TIF格式图像。
JPEG是一种压缩比比较大的图片格式，图片以JPEG格式保存以后，会损失掉不少图片信息，但其好处就是图片体积小，放在电脑里，可以占用较小的空间，在网上传播，速度比较快，所以，JPEG和GIF又称为WEB格式。
下面提供一种可以在线浏览TIF格式图片的方法。
TIFF.js基于JavaScript的的TIFF图像格式解析器，可在浏览器中内嵌TIFF图像，就好像它们是真实支持的一样！
通过使用Emscripten编译LibTIFF C代码，tiff.js是LibTIFF的一个端口。
https://github.com/seikichi/tiff.js/tree/master
扩展程序通过拦截浏览器加载以.tiff结尾并处理该请求的URL的任何尝试来工作。处理包括使用Javascript，LLVM / Emscripten，libtiff端口将TIFF图像渲染到内存画布中。画布有一种方法，用于将其内容作为data:imageURL获取，然后替换img标签中的src属性。
1、阻止原始请求
2、使用XHR从请求的URL加载图像数据
3、将接收的图像数据渲染到画布中
4、data:image从canvas 获取URI替换img标签中的src属性

结果是TIFF图像出现在页面上，就像浏览器本身支持TIFF图像一样。但是，由于我们必须单独下载和解码图像，因此会有一个小延迟。但它足够小，除非你寻找它，否则你不会注意到它。

tif格式图片在线浏览demo

tif格式图片和pikachoose结合的在线浏览

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, minimum-scale=0.1">
	<title>TIFF test</title>
	<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="tiff.js" type="text/javascript"></script>
</head>
<body style=" background: #0e0e0e;">
<div class="tif-data" style="width:80%;height:100%;margin: 0px auto;">
<img style="width:100%" data-src="http://oa.ieage.cn/tiff/000001.tif"/>
<img style="width:100%" data-src="http://oa.ieage.cn/tiff/000002.tif"/>
<img style="width:100%" data-src="http://oa.ieage.cn/tiff/000003.tif"/>
<img style="width:100%" data-src="http://oa.ieage.cn/tiff/000004.tif"/>
<img style="width:100%" data-src="http://oa.ieage.cn/tiff/000005.tif"/>
</div>
<script type="text/javascript">
    var memory='32M';
    if (memory) {
        Tiff.initialize({ TOTAL_MEMORY: memory });
    }
    function convert_binary_string_to_buffer( data ){
        var buffer, view, a_byte;

        buffer = new ArrayBuffer( data.length );
        view = new DataView( buffer );

        data.split( '' ).forEach( function( c, i ){
            a_byte = c.charCodeAt();
            view.setUint8( i, a_byte & 0xff );
        });

        return view.buffer;
    }

    function create_request_for_url( url ){
        var request;
        console.log( 'Starting XHR request for', url );
        request = new XMLHttpRequest();
        request.open( 'GET', url, false );
        request.overrideMimeType( 'text/plain; charset=x-user-defined' );
        request.send( );
        console.log( 'Finished XHR request' );

        return request;
    }

    function get_buffer_from_url( url ){
        var request;

        request = create_request_for_url( url );

        if( request.status != 200 ){
            console.log( 'Exception', 'request for image failed', request );
            return url;
        }

        return convert_binary_string_to_buffer( request.responseText );
    }

    convert_buffer_to_dataurl = function( buffer ){
        var tiff;

        try {
            console.log( 'Opening tiff' );
            tiff = new Tiff({ buffer: buffer });
            console.log( 'Opened', 'width: ', tiff.width(), 'height: ', tiff.height(), tiff );
        } catch( e ){
            console.log( 'Exception', e );
            return;
        }

        return tiff.toDataURL();
    };

    function redirect_request_to_dataurl( details ){
        var url, buffer, dataURI;

        console.log( 'Entering', details );
        url = details.url;
        console.log( 'Loading', details.url );
        buffer = get_buffer_from_url( url );
        console.log( 'Loaded', buffer.byteLength, 'bytes of data' );
        dataURI = convert_buffer_to_dataurl( buffer );
        console.log( 'Converted', dataURI );
        return dataURI;
    }

    $(function () {
        var img = $('.tif-data img');
        for(i=0;i<img.length;i++){
            var url = $('.tif-data img:eq('+i+')').attr('data-src');
            console.info(url);
            var new_url = redirect_request_to_dataurl({url: url});
            $('.tif-data img:eq('+i+')').attr('src', new_url);
        };

    })
</script>
</body>
</html>