在 HTML 中渲染 TIF 文件

Question

我正在构建一个实用程序，它将从 blob 存储中提取 TIF 文件并在 html 中呈现它们。由于它只是一个实用程序，我将在显示 TIF 文件的 Edge 中查看它们。

我可以看到 this page 上的第八个示例渲染良好。意思是，此代码有效：

<img width=200 height=200 
  src="tiffdocument.tif" alt="">

但是，我下面的 HTML 没有呈现任何内容：

<img src="https://atpblob.blob.core.windows.net/imagedata/94ae9802-4e42-4ba1-8955-11ac7c7e3509.tif" alt="" width="500" height="500">

如果我直接转到源中的link，它会下载图像，为什么不渲染？

Answer 1

知道了。

img 与我尝试使用它的方式不同。您必须明确使用 GET 请求来拉取文件。

为了跨浏览器呈现文件，我最终使用了 tiff.js。

我推送到浏览器的最终 html/js/css 字符串最终看起来像这样：

<!doctype html>
<html>
<head>
      <title>TIF View</title>
</head>
<body>
      <script type="text/javascript" src="https://cdn.rawgit.com/seikichi/tiff.js/f03d7965/tiff.min.js"></script>
      <script>
              var xhr = new XMLHttpRequest();
              xhr.responseType = 'arraybuffer';
              xhr.open('GET', 'https://atpblob.blob.core.windows.net/imagedata/${blob}.tif');
              xhr.onload = function (e) {
                                var tiff = new Tiff({buffer: xhr.response});
                                var canvas = tiff.toCanvas();
                                document.body.appendChild(canvas);
                            };
              xhr.send(null);
       </script>
       <style>
              canvas {
                      min-height: 60px;
                      }
       </style>
  </body>

在 HTML 中渲染 TIF 文件

Rendering TIF files in HTML

html

tiff

image