呈现HTML中的TIF文件

我正在构建一个实用程序，它将从blob存储中提取TIF文件并在html中呈现它们。由于它只是一个实用程序，我会在Edge中查看它们，它显示TIF文件。呈现HTML中的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">

如果我直接去源链接，它会下载图像，所以为什么它不渲染？

来源

2017-06-14 Boris K

明白了。

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>

来源

2017-06-15 10:38:04

-1

这并不是图像渲染的.tif直接插入HTML是一个好主意。 .tif图像用于创建购物商场附近的囤积/横幅广告，默认情况下它们的大小大于70MB，而不是使用.png图像，它们有助于更快速地加载网页。&页面尺寸会更小。尝试使用适当的缩小率在photoshop中转换它们。

来源

2017-06-15 10:40:45

呈现HTML中的TIF文件

回答

相关问题