导入tif

1. 主要依靠 UTIF 库进行解析

import UTIF from 'utif'


const input = document.createElement('input')
  input.type = 'file'
   input.accept = '.tif, .tiff'
   input.onchange = (e) => {
     const file = e.target.files[0]
     this.file = file
     let reader = new FileReader()
     reader.onload = (e) => {
       loadTifImage(e.target.result)
       resolve()
     }
     reader.onerror = (e) => {
       reject(e)
     }
     reader.readAsArrayBuffer(file)
   }
   input.click()

function loadTifImage(arraybuffer){
	// 解码TIFF图像数据，获取图像文件目录（IFDs）
	var ifds = UTIF.decode(arraybuffer)
	 console.log(ifds, 'ifds')
	 // 解码图像数据，将IFDs[0]指向的图像数据转换为RGBA格式
	 UTIF.decodeImage(arraybuffer, ifds[0])
	 var rgba = UTIF.toRGBA8(ifds[0]) // Uint8Array with RGBA pixels
	 var imageHeight = ifds[0].height
	 var imageWidth = ifds[0].width
	drawCanvas(rgba, imageHeight, imageWidth )
}

drawCanvas(rgba, imageHeight, imageWidth){
	let canvas = document.createElement('canvas')
    canvas.width = imageWidth
    canvas.height = imageHeight

    const ctx = canvas.getContext('2d')
    const imageData = new ImageData(new Uint8ClampedArray(rgba.buffer), 			imageWidth, imageHeight)
    ctx.putImageData(imageData, 0, 0)
}

2. 导出tif

// 将画布内容转换为图像数据
 const ctx = canvas.getContext('2d')
  try {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    // 使用 UTIF.js 生成 TIFF 文件
    const tiffData = UTIF.encodeImage(imageData, canvas.width, canvas.height)
    // 创建 Blob 对象
    const blob = new Blob([tiffData], { type: 'image/tiff' })

     // 创建 URL
     const url = URL.createObjectURL(blob)
     this.downloadImageFile(url, name + '.tif')
     URL.revokeObjectURL(url)
  } catch (err) {
    console.error(err)
  }