私はBLOBストレージからTIFファイルを引き出し、htmlでレンダリングするユーティリティを構築しています。それは単なるユーティリティなので、TIFファイルを表示するEdgeで表示します。HTMLでTIFファイルをレンダリングする
this pageの8番目の例がうまく表示されます。意味は、このコードは動作しますので、私はソース内のリンクに直接行けば
<img src="https://atpblob.blob.core.windows.net/imagedata/94ae9802-4e42-4ba1-8955-11ac7c7e3509.tif" alt="" width="500" height="500">
、それはイメージをダウンロードします。しかし
<img width=200 height=200
src="tiffdocument.tif" alt="">
、私のHTML、以下、何もレンダリングされません。なぜそれはレンダリングされませんか？
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ファイルにレンダリングするのは良い考えではありません。 .tifイメージは、ショッピングモールの近くにある荷台/バナーを作成するために使用され、そのサイズはデフォルトで70MB以上です。代わりに.pngイメージを使用すると、Webページの読み込みが速くなります。&ページサイズは小さくなります。適切な縮小率でPhotoshopで変換してみてください。