TIFF 格式在网页中显示

今天解析 XML 遇到了 TIFF 图片，网页打不开图片。转成 base64还是打不开。我就在想到底是为什么呢？由于目前接触的项目和过去四年接触的都不一样，每天都要自言自语“为什么呢~” “怎么会这样啊，不应该啊~”“不是吧，怎么可能呢？”。所以今天也一样。

TIFF是什么？

标签图像文件格式（Tag Image File Format，TIFF）是一种灵活的位图格式，主要用来存储包括照片和艺术图在内的图像，最初由Aldus公司与微软公司一起为PostScript打印开发。TIFF与JPEG和PNG一起成为流行的高位彩色图像格式。

这是百度百科上的解释，也就是说 TIFF 是为打印开发的，并不适用在 Web 浏览器中查看。

转成二进制流

一般遇到这种问题直接打不开，就想到转来转去。因为我直接读取的就是文件就是文件流，采用的是 Unit8Array 数组存储。然后通过 tiff.js 转成 canvas 再做处理。

npm install tiff.js

let ctx = canvas.getContext('2d')
let Tiff = require('tiff.js')
// imgData 是我获取文件后转成的 Unit8Array 数组
let tiff = new Tiff({ buffer: imgData})
let tiffCanvas = tiff.toCanvas()
let imgRealWidth = tiff.width()
let imgRealHeight = tiff.height()

tiffCanvas.setAttribute(
  'style',
  `width: ${imgWidth}px;height: ${imgHeight}px;`
)
// 之后是想直接 drawImage 或是 toDataURL() 都可以

超级简单。