VUE + tiff.js 加载 tiff，tif 图片

前段时间公司有个需求，就是前端要加载大量的tif 和 tiff 格式的图片
瞬间觉得头大如牛，没有一点思路，于是一直问度娘，功夫不负苦心人，终于让我找到了一款比较好用的插件 tiff.js

// 引入依赖
npm install tiff.js

使用

<div class="img-box"><div ref="imgContainer" class="tifcontent zoomimg"@mousewheel="handleZooming"v-loading.lock="tifLoading"@mousedown="handleDown"></div>
</div>

// 联调接口  获取tif
async getTiffContent (item) {this.tifLoading = truelet offsetHeight = document.getElementsByClassName('img-box')[0].offsetHeightlet offsetWidth = document.getElementsByClassName('img-box')[0].offsetWidthawait getTiff({attachBatchId: item.attachUrl,attachName: item.attachName}).then(res => {// 引入tiff.jsvar Tiff = require('tiff.js')var tiff = new Tiff({ buffer: res.data })var canvas = tiff.toCanvas() //绘制canvas//获取宽高var width = tiff.width()var height = tiff.height()console.log(width, height)if (canvas) {canvas.setAttribute('style', 'width: 100%;')// 设置宽高 等比例缩放图片var scale = 1if (width > offsetWidth || height > offsetHeight) {if (width > height) {scale = offsetWidth / width} else {scale = offsetHeight / height}}canvas.setAttribute('style','width:' +width * scale +'px; height: ' +height * scale +'px;max-width:calc( 100vh* scale - 246px* scale );max-height: calc( 100vh - 180px);')canvas.setAttribute('id', item.attachUrl)canvas.setAttribute('ref', 'canvas')}this.tifLoading = false},

不过在IE浏览器中加载tif图片会很卡，会出现如图所示的情况，目前没有找到解决办法，如有大佬遇到且已解决，欢迎指教

VUE + tiff.js 加载 tiff，tif 图片相关推荐

vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
mapboxgl加载tiff
缘起近期在项目中遇到这么一个需求,需要在地图上展示一组格网数据,格网大小为2m*2m,地图api用的mapboxgl.起初拿到这个需要感觉很easy,在地图上添加一个fill图层就好啦.把格网面数据 ...
vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
vue使用three.js加载obj和mtl
①构建三维坐标,代码如下  <template><div id="container"></div> </te ...
three.js加载和使用纹理-加载DDS、PVR、TGA格式的纹理(vue中使用three.js73)
加载DDS.PVR.TGA格式的纹理 1.demo效果 2. 实现要点 2.1 加载DDS格式纹理 2.2 加载PVR格式纹理 2.3 加载TGA格式纹理 3. demo代码 1.demo效果以上三 ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
Vue+Leaflet实现加载Stamen显示地图
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面加载显示OSM的基础上,怎样显示s ...

VUE + tiff.js 加载 tiff，tif 图片

VUE + tiff.js 加载 tiff，tif 图片相关推荐

最新文章

热门文章