最近有个需求就是在网页中预览tiff图片 我查了img标签不支持，要求后端转成base64也不行， 后来查了很多资料，需要后端转成文件流
步骤
- 当然，后端必须要转成流
- 前端要装tiff.js插件 npm install --save tiff.js
async getTiffContent (item) {
await getTiff({ attachBatchId: item.attachUrl, attachName: item.attachName }).then(
res => {
var Tiff = require('tiff.js')
var tiff = new Tiff({ buffer: res.data })
console.log(tiff)
var canvas = tiff.toCanvas()
console.log(canvas)
var width = tiff.width()
var height = tiff.height()
if (canvas) {
// 设置宽高 width: 560px; height: 300px; 等比例缩放图片
var scale = 1
if (width > 1000 || height > 1000) {
if (width > height) {
scale = 1000 / width
} else {
scale = 1000 / height
}
}
canvas.setAttribute(
'style',
'width:' +
width * scale +
'px; height: ' +
height * scale +
'px;max-width:1000px;max-height: 1000px;'
)
canvas.setAttribute('id', item.attachUrl)
}
this.$nextTick(() => {
this.$refs.container.innerHTML = ''
console.log('普通区域', canvas)
this.$refs.container.appendChild(canvas)
console.log('普通', this.$refs.container)
if (this.fullScreenImgVisible) {
this.$refs.fullScreenContainer.innerHTML = ''
console.log('放大区域', canvas)
this.$refs.fullScreenContainer.appendChild(canvas)
console.log('放大', this.$refs.fullScreenContainer)
}
})
}
)
},
