Today, I encountered A TIFF image when parsing XML, and the web page could not open the image. Switch to base64 and it still won’t open. And I was wondering why? Since the projects I am working on are different from those I have worked on in the past four years, I have to ask myself why, how could this happen, shouldn’t it happen, no, how could it happen? . So today is no different.

What is TIFF?

The Tag Image File Format (TIFF) is a flexible bitmap Format for storing images, including photos and art drawings, originally developed by Aldus with Microsoft for PostScript printing. TIFF has become a popular high-order color image format along with JPEG and PNG.

This is baidu Baike’s explanation, which means TIFF was developed for printing and is not suitable for viewing in a Web browser.

To a binary stream

Generally encounter this kind of problem directly can not open, think of turning around. Because what I’m reading directly is a file or a file stream, using Unit8Array. And then it goes through tiff. Js to canvas.

npm install tiff.js
Copy the code
let ctx = canvas.getContext('2d')
let Tiff = require('tiff.js')
ImgData is the Unit8Array array that I turned into after I got the file
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; `
)
// If you want to drawImage directly or toDataURL(), you can do it
Copy the code

Super simple.