Question

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

我可以看到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">

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

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>

Answer 2

将.tif图像直接渲染为HTML并不是一个好主意。 .tif图像用于在购物中心附近创建囤积/横幅，默认情况下它们的大小超过70MB，而不是使用.png图像，它们可以更快地加载网页。页面大小会更少。尝试以适当的缩减率在photoshop中转换它们。

在HTML

2 个答案: