Web前端js实现tif文件浏览(含多页tif)

处理tif或者tiff文件需要用到tif.min.js文件,附件已附上:

下面是核心js代码

var loadImage = function (filename) {var xhr = new XMLHttpRequest();xhr.open('GET', filename); //filename为tif文件地址xhr.responseType = 'arraybuffer';xhr.onload = function (e) {var buffer = xhr.response;var tiff = new Tiff({buffer: buffer});//tiff文件中有多张图片for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {tiff.setDirectory(i);const canvas = tiff.toCanvas();if (canvas) {canvasList.push(canvas);}}maxPage = canvasList.length;//alert(canvasList.length)//alert(maxPage)console.log('---------')console.log(canvasList)console.log(cunrrentPage - 1)let image = canvasList[cunrrentPage - 1];console.log(image);pushImg(image)};xhr.send();};loadImage('${imgUrl}'); //这里是我本人获取tif文件url并调用一次当前函数
})

定义加载某一页tif文件的函数

function pushImg(image) {$('.image>canvas').replaceWith(image)
}

然后在点击上一页或者下一页的地方调用上面加载tif文件的函数即可,下面是效果图:

点击下一页

Web前端js实现tif文件浏览(含多页tif)相关推荐

web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
web前端 js实现频域水印制作
web前端 js实现频域水印制作傅里叶变换实现频域水印的方法源自https://github.com/zeruniverse/CryptoStego. 调用cryptostego.min.js ...
web前端-JS入门
web前端-JS入门 1.初识JavaScript 1.1 JavaScript的简单介绍 1.2 JS的三种写法 1.2.1 行内式 1.2.2 内嵌式 1.2.3 外部js 1.3 JS输入输出语 ...
WEB前端JS与UI框架
前端Js框架汇总概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...
Web 端 js 导出csv文件(使用a标签)
前言导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
web前端期末大作业 HTML+CSS2 华为商城 5页
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项 ...
用DIV+CSS技术设计的个人电影网站-web前端网页制作课作业---电影介绍 5页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素| ...
arcgis怎么压缩tif文件_使用gdal压缩tif文件
工作中需要使用tif文件作为底图显示,但是一般新出炉的tif文件都比较大,可能百兆甚至上G级别的,在移动设备中会有些遭不住,所以,就需要进行体积的压缩. 目前使用了GDAL进行压缩,可以到达20倍左右 ...
前端JS获取图片文件的真实格式
目录常见方式判断图片格式图像数据简单说明 JS读取图片真实格式 svg格式的判断总结前面博文有提到,当前主流浏览器能支持的图片格式,是七种:jpg.png.gif.bmp.ico.webp.s ...

Web前端js实现tif文件浏览(含多页tif)

Web前端js实现tif文件浏览(含多页tif)相关推荐

最新文章

热门文章