在浏览器上显示TIF图像
在实际的业务中，我们需要在浏览器中对 TIF 文件的某个区域进行选择，所以需要展示 TIF 文件在浏览器中。不过浏览器并不能直接支持 TIF 格式，所以我们需要做相应的处理。
# 寻找合适的解析库
图像处理是一个很复杂的事情，如果别人有实现就别自己造轮子了。这里我推荐UTIF.js (opens new window)，这位作者实现了网页版图片编辑器。所以质量上还是很高的。
# 导入图片二进制数据
我们需要把图片导入成二进制数据，我们使用fetch来获取图片二进制数据，fetch 本身就可以返回二进制数据，大致代码如下：
fetchImage() {
fetch("bali.tif")
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.arrayBuffer();
})
.then(data => {
const ifds = UTIF.decode(data);
UTIF.decodeImage(data, ifds[0]);
const rgba = UTIF.toRGBA8(ifds[0]);
const widh = ifds[0].width;
const height = ifds[0].height;
const canvas = document.createElement("canvas");
canvas.width = widh;
canvas.height = height;
this.width = widh;
this.height = height;
const ctx = canvas.getContext("2d");
const imgData = new ImageData(
new Uint8ClampedArray(rgba.buffer),
widh,
height
);
ctx?.putImageData(imgData, 0, 0);
canvas.toBlob(blob => {
this.imgData = URL.createObjectURL(blob);
});
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
导入的二进制数据，使用UTIF去解码二进制数据。拿到图片的基本信息之后，创建相应的 canvas 画布，把图片数据加载进 canvas 之后可以创建ObjectURL就可以使用img tag 来显示。
# 总结
处理 TIF 文件本身并不是很复杂，在于找到合适的方法。完整的演示代码在vue-tif (opens new window)。