摘要： 需要展示tiff文件实现预览功能：从本地获取：tiff图像非常大环境vue3 +vite
`` 安装
1 npm install tiff.js
引入 mport Tiff from 'tiff.js'会报错，如果是webpack 可以导入可以使用require导入 但是你用的是vite导入，默认包没有使用module导出导致找不到包采用直接导入
会报错：
所以转化一下公共函数
判断下类型
const filechange = async (UploadFile: UploadFile) => {
let isTif = ['image/tiff', 'image/tif'].includes(UploadFile.raw.type)
if (isTif) {
getTiffDataUrlHandler(URL.createObjectURL(UploadFile.raw)).then((res) => {})
} else {
imgsrc.value = URL.createObjectURL(UploadFile.raw)
}
}
转换
* @description: getTiffDataUrlHandler
* @return {*}
*/
const getTiffDataUrlHandler = (url: string) => {
return new Promise(function (resolve, reject) {
const loading = ElLoading.service({
lock: true,
text: '正在解析',
background: 'rgba(0, 0, 0, 0.7)'
})
let canvasList: any = []
let status = false
Tiff.initialize({ TOTAL_MEMORY: 500 * 1024 * 1024 })
axios
.get(url, { responseType: 'blob' })
.then((res) => {
res.data.arrayBuffer().then((arrayBuffer) => {
const tiff = new Tiff({
buffer: arrayBuffer
})
for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
tiff.setDirectory(i)
var imgs = tiff.toDataURL() // 转化成base64
if (imgs) {
canvasList.push(imgs)
}
}
imgsrc.value = canvasList as any
resolve(canvasList)
loading.close()
status = true
})
})
.catch((err) => {
console.error('图片出错')
status = false
})
reject(console.error('图片出错'))
// 要做的事情...
})
}
当然base64 字符串太大，有时候会无法解析出现bug 解决方案做分段渲染：
// 片段数组
let canvasList: any = []
let status = false
Tiff.initialize({ TOTAL_MEMORY: 500 * 1024 * 1024 })
axios
.get(url, { responseType: 'blob' })
.then((res) => {
res.data.arrayBuffer().then((arrayBuffer) => {
const tiff = new Tiff({
buffer: arrayBuffer
})
for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
tiff.setDirectory(i)
var imgs = tiff.toDataURL() // 转化成base64
if (imgs) {
canvasList.push(imgs)
}
}
再传入你的预览组件prop 实现了 获取文件解析渲染，大部分不会失真
