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

 

鑽研不易，轉載請註明出處。。。。。。

 

 

 

 

 

 

 

 

 

 

翻譯

搜索

複製