呈現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文件

回答

相關問題