<html>
<meta charset="utf-8" />
<script src="tiff.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', "http://localhost/1_2.tif");
xhr.onload = function(e){
? Tiff.initialize({ TOTAL_MEMORY :100*1024*1024 });
? var tiff = new Tiff({buffer: xhr.response});
? //输出tiff文件数量
? var canvasList = [];
? var buttons = [];
? var countDirectory = tiff.countDirectory();
??
? for(let i = 0;i < countDirectory;i++){
?? ?tiff.setDirectory(i);
?? ?var canvas = tiff.toCanvas();
?? ?canvasList.push(canvas);
?? ?
?? ?let button = document.createElement("INPUT");
?? ?button.type = "button";
?? ?button.value = "第"+(i + 1)+"页";
?? ?button.style.cssText = "margin-left:"+i * 10 +"px;";
?? ?button.addEventListener("click",(function(n){
?? ??? ?return function(){
?? ??? ??? ?for(let i = 0;i < buttons.length;i++){
?? ??? ??? ??? ?buttons[i].style.fontWeight = "normal";
?? ??? ??? ?}
?? ??? ??? ?buttons[n].style.fontWeight = "bold";
?? ??? ??? ?var tiffcontainer = document.getElementById("tiffcontainer");
?? ??? ??? ?tiffcontainer.innerHTML ?= '';
?? ??? ? ? ?var canvas = canvasList[n];
?? ??? ? ? ?canvas.style.width = tiffcontainer.clientWidth;
?? ??? ? ? ?canvas.style.height = tiffcontainer.clientHeight;
?? ??? ? ? ?tiffcontainer.append(canvas);
?? ??? ?}
?? ?})(i));
?? ?document.getElementById("buttons").append(button);
?? ?buttons.push(button);
? }
??
? buttons[0].click();
};
xhr.send();
</script>
<body>
前端预览tif文件测试
<div id="buttons">
?? ?
</div>
<div style="width:800px;height:500px;border:1px solid silver;margin-top:10px;" id="tiffcontainer">
</div>
</body>
</html>
tiff.js下载:? git clone https://github.com/seikichi/tiff.js.git
如果不加 Tiff.initialize({ TOTAL_MEMORY :100*1024*1024 }); 控制台会报错 offset is out of bounds
效果如下
