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
钻研不易，转载请注明出处。。。。。。
翻译
搜索文章来源：https://www.toymoban.com/news/detail-518535.html
复制文章来源地址https://www.toymoban.com/news/detail-518535.html
到了这里，关于vue3+tiff.js展示tif文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
