Web前端实现多页Tif文件预览

天水麒麟姜伯约

已于 2022-03-20 18:10:55 修改

阅读量2.9k

点赞数

分类专栏：前端图片文章标签： javascript html5 ajax html 前端

于 2022-03-20 10:28:23 首次发布

本文链接：https://blog.csdn.net/weixin_38526093/article/details/123608675

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

图片

1 篇文章 0 订阅

订阅专栏

<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

效果如下

天水麒麟姜伯约

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web前端实现多页Tif文件预览

<html><meta charset="utf-8" /><script src="tiff.js"></script><script>var xhr = new XMLHttpRequest();xhr.responseType = 'arraybuffer';xhr.open('GET', "http://localhost/6.tif");xhr.onload = function(e){ ***Tiff.initiali.
复制链接

扫一扫