Tif format to JPG, PNG

I recently encountered a need to preview images in the format on a web page tif. At first I thought that they could be previewed JPG、PNGdirectly through the tag like ordinary images , but in fact, browsers do not support direct preview of images in the format. Only through some means, the The picture format is converted into a commonly used picture format. After some exploration, here are two plug-in libraries, one is and the other is . Both are relatively simple to use.imgtiftiffutif

1、tiff

download dependencies

npm i tiff

import in project

import {
    
     decode as Tiff } from "tiff";

Specific steps

async function getData() {
    
    
    const buffer = await fetch("xxx.tif").then((res) => res.arrayBuffer());
    // 将请求到的 buffer 数据进行解析，得到 tif 文件的宽高和一个 Uint8Array 数组
    const {
    
     data, width, height } = Tiff(buffer)[0];
    // 得到图片的宽高和 Uint8Array 数据，那么问题就简单了，我们只需要通过这些数据通过画布画出来
    // 通过调用画布的 toDataURL 就可以将画布的数据转化为一个 base64 的图片链接
    return canvasToImage({
    
    data, width, height})
}

const canvasToImage = (data: any) => {
    
    
    const canvas = document.createElement("canvas");
    canvas.width = data.width;
    canvas.height = data.height;
    const ctx = canvas.getContext("2d");
    // 转化 imageData 数据的格式
    const imageData = getImageData({
    
     ...data });
    ctx.putImageData(imageData, 0, 0);
    const url = canvas.toDataURL("image/png");
    return url;
};

const getImageData = ({
     
      width, height, data: source }: any) => {
    
    
    const imageData = new ImageData(width, height);
    const data = imageData.data;

    for (let i = 0; i < source.length; ++i) {
    
    
        data[i] = source[i];
    }
    return imageData;
};

insert image description here

2、Utfi

utifHere I only use the key code, directly download the core js file in the git warehouse, import it in the project, if you want to download it through the dependent library;

download dependencies

npm i utif

import in project

// 这里是我自己的项目导入位置，我拿的是核心文件，足以
import "./util.js"

Specific steps
- The first method: use decodeit together deccodeImageto canvasgenerate a picture link
- The second type: directly use the conversion UTIFof the tool bufferToURI, suitable for tif files of a single image

// 第一种实现方式
async function getData() {
    
    
    const buffer = await fetch("xxx.tif").then((res) => res.arrayBuffer());
    // 通过 UTIF 工具进行解码，这里因为在项目中导入了核心文件，它是挂在全局上的，所以可以直接用
    // ifds 是一个数组，里面存的是每张图的数据，这里以一张图的 tif 为例
    const ifds = UTIF.decode(buffer);
    // 如果是多图的 tif 文件，可以循环遍历拿到每张图的链接
    UTIF.decodeImage(buffer, ifds[0]);
    return canvasToImage(idfs[0])
}
const canvasToImage = (ifd: any) => {
    
    
	const {
    
     data, width, height } = ifd
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");
    const rgba = UTIF.toRGBA8(ifd);
    const imageData = new ImageData(new Unit8ClampedArray(rgba.buffer), width, height);
    ctx.putImageData(imageData, 0, 0);
    const url = canvas.toDataURL("image/png");
    return url
};

// 第二种实现方式
async function transformTIF() {
    
    
	const buffer = await fetch('xxx.tif').then(res => res.arrayBuffer());
	// bufferToURI 内部实现也是通过 decode 和 decodeImage 进行转换，只是这里做了一层封装
	const url = UTIF.bufferToURI(buffer);
	console.log(url);
}

insert image description here