瓜瓜头条

vue3+tiff.js展示tif文件

2023-07-04 15:33 由 莫小龙 发表于 #前端开发

vue3+tiff.js展示tif文件

场景：tif格式的文件需要在页面上预览（预览的tif文件较小）

组件：tiff.js

npm install tiff.js

组件引入：

import 'tiff.js';

　　注意：网络上的信息引入使用import Tiff from 'tiff.js'   但是实际测试这样会报错：

 　看源码发现只需要直接import即可获取到Tiff对象

代码：

async function getTiffDataUrlHandler() {
        await axios.get('../../../public/1.tiff', { responseType: 'blob' }).then((res) => {
          res.data.arrayBuffer().then((arrayBuffer) => {
            const tiff = new Tiff({
              buffer: arrayBuffer,
            });
            //转成png格式的base64图片，将其用img标签展示即可
            console.log(tiff.toDataURL("image/png"))
          })
        });
      }

注意：

1.由于tiff文件格式浏览器不能直接识别，所以需要通过ajax获取到文件流blob，然后使用tiff.js将其转换为base64格式

2.现实使用中，遇见的文件格式后缀为.jpg，实际文件为tif格式导致不能展示。所以以上方法可以直接将.jpg后缀的tif格式文件进行转换。

3..jpg后缀的tif格式文件直接用ps打开会报错，但是后缀改为.tiff即可编辑。

 

测试文件：

https://files.cnblogs.com/files/s313139232/tif%E5%89%8D%E7%AB%AF%E5%8A%A0%E8%BD%BD_%E6%B5%8B%E8%AF%95%E6%96%87%E4%BB%B6.zip?t=1688455935&download=true

 

钻研不易，转载请注明出处。。。。。。

 

 

 

 

 

 

 

 

 

 

热门相关：洪荒二郎传   民国之文豪崛起   变身蜘蛛侠   变身蜘蛛侠   回眸医笑，冷王的神秘嫡妃