2017-06-14 3 views
1

Ich baue ein Dienstprogramm, das TIF-Dateien aus Blob-Speicher ziehen und in HTML rendern wird. Da es nur ein Dienstprogramm ist, werde ich sie in Edge anzeigen, die TIF-Dateien zeigt.Rendern von TIF-Dateien in HTML

Ich kann das achte Beispiel auf this page wird gut sehen. Die Bedeutung dieser Code funktioniert:

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

jedoch meine HTML, unten, macht nichts:

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

Wenn ich direkt auf den Link in der Quelle gehe, wird es das Bild herunterladen, so Warum wird es nicht rendern?

Antwort

0

Verstanden.

img funktioniert nicht so, wie ich es versuchte. Sie müssen explizit eine GET-Anforderung zum Abrufen der Datei verwenden.

Zum Rendern der Datei Cross-Browser, endete ich mit tiff.js.

Die endgültige html/js/css String ich an den Browser gedrückt endete wie folgt aussehen:

<!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> 

-1

Es ist keine gute Idee, .tif Bilder direkt in HTML zu rendern. TIF Bilder werden verwendet, um Horten/Banner in der Nähe von Einkaufszentren zu erstellen und ihre Größen sind mehr als 70 MB standardmäßig, stattdessen verwenden Sie. Png Bilder, sie helfen, die Webseite schneller laden & Seitengröße wird weniger. Versuchen Sie, sie in Photoshop mit der entsprechenden Reduktionsrate zu konvertieren.