vue3+tiff.js展示tif文件

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

 

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

 

 

 

 

 

 

 

 

 

 

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