使用 seikichi/tiff 库显示现有的 TIFF 文件
Display Existing TIFF File Using the seikichi/tiff Library
这是我用来从输入元素加载文件的 JavaScript 代码。图片格式包括jpeg、png、tiff。
$(document).ready(function() {
FileDetails = function() {
var input = document.getElementById('fileUpload');
var output = document.getElementById('tblUpload');
//' + (URL || webkitURL).createObjectURL(input.files[i]) +'
output.innerHTML = '<tr>';
output.innerHTML += '<th class="thStyle" style="width: 400px;"><b>File Name</b></th><th class="thStyle" style="width: 150px;"><b>Preview Image</b></th>';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += '<td style="padding: 10px; width: 400px;">' +
input.files[i].name + '</td>' +
'<td style="padding: 10px; width: 150px; color: #0d47a1">' +
'<a target="_blank" href="' + (URL || webkitURL).createObjectURL(input.files[i]) + '">Show</a></td>';
}
output.innerHTML += '</tr>';
}
});
现在,如何使用 seikichi/tiff 库显示 tiff 文件?
我一直在测试各种图片格式,但tiff文件格式总是要求下载。其他如jpeg、png等均可显示。
您需要先将文件从 TIFF 格式转换。现在文件以二进制文件的形式传递,浏览器不知道如何处理它,因此它要求用户下载。
您需要实际使用 tiff 库来解析文件并将其转换为浏览器可以显示的内容。
步骤简单:
var tiff = new Tiff({buffer: arrayBuffer});
var canvas = tiff.toCanvas();
但是您首先需要将文件 blob 转换为 ArrayBuffer
。为此,您可以使用 FileReader()
。然后,当您将 ArrayBuffer
传递给 TIFF 实例时。然后将结果转换为 canvas 并显示。
实例
注意:对于生产,您当然必须执行检查以查看文件是否确实是 Tiff(例如通过使用 file.type
)、错误处理等
document.querySelector("input").onchange = function() {
// convert File blob to ArrayBuffer using a FileReader
var fileReader = new FileReader();
fileReader.onload = function() { // file is now ArrayBuffer:
var tiff = new Tiff({buffer: this.result}); // parse and convert
var canvas = tiff.toCanvas(); // convert to canvas
document.querySelector("div").appendChild(canvas); // show canvas with content
};
fileReader.readAsArrayBuffer(this.files[0]); // convert selected file
};
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<label>Select TIFF file: <input type=file></label><div></div>
因此,要加载多个文件,您可以循环执行相同的操作:
document.querySelector("input").onchange = function() {
var files = this.files, fileReader;
for(var i = 0; i < files.length; i++) {
fileReader = new FileReader();
fileReader.onload = handler;
fileReader.readAsArrayBuffer(files[i]); // convert selected file
}
function handler() { // file is now ArrayBuffer:
var tiff = new Tiff({buffer: this.result}); // parse and convert
var canvas = tiff.toCanvas(); // convert to canvas
document.querySelector("div").appendChild(canvas); // show canvas with content
};
};
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<label>Select TIFF file: <input type=file multiple></label><div></div>
这是我用来从输入元素加载文件的 JavaScript 代码。图片格式包括jpeg、png、tiff。
$(document).ready(function() {
FileDetails = function() {
var input = document.getElementById('fileUpload');
var output = document.getElementById('tblUpload');
//' + (URL || webkitURL).createObjectURL(input.files[i]) +'
output.innerHTML = '<tr>';
output.innerHTML += '<th class="thStyle" style="width: 400px;"><b>File Name</b></th><th class="thStyle" style="width: 150px;"><b>Preview Image</b></th>';
for (var i = 0; i < input.files.length; ++i) {
output.innerHTML += '<td style="padding: 10px; width: 400px;">' +
input.files[i].name + '</td>' +
'<td style="padding: 10px; width: 150px; color: #0d47a1">' +
'<a target="_blank" href="' + (URL || webkitURL).createObjectURL(input.files[i]) + '">Show</a></td>';
}
output.innerHTML += '</tr>';
}
});
现在,如何使用 seikichi/tiff 库显示 tiff 文件?
我一直在测试各种图片格式,但tiff文件格式总是要求下载。其他如jpeg、png等均可显示。
您需要先将文件从 TIFF 格式转换。现在文件以二进制文件的形式传递,浏览器不知道如何处理它,因此它要求用户下载。
您需要实际使用 tiff 库来解析文件并将其转换为浏览器可以显示的内容。
步骤简单:
var tiff = new Tiff({buffer: arrayBuffer});
var canvas = tiff.toCanvas();
但是您首先需要将文件 blob 转换为 ArrayBuffer
。为此,您可以使用 FileReader()
。然后,当您将 ArrayBuffer
传递给 TIFF 实例时。然后将结果转换为 canvas 并显示。
实例
注意:对于生产,您当然必须执行检查以查看文件是否确实是 Tiff(例如通过使用 file.type
)、错误处理等
document.querySelector("input").onchange = function() {
// convert File blob to ArrayBuffer using a FileReader
var fileReader = new FileReader();
fileReader.onload = function() { // file is now ArrayBuffer:
var tiff = new Tiff({buffer: this.result}); // parse and convert
var canvas = tiff.toCanvas(); // convert to canvas
document.querySelector("div").appendChild(canvas); // show canvas with content
};
fileReader.readAsArrayBuffer(this.files[0]); // convert selected file
};
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<label>Select TIFF file: <input type=file></label><div></div>
因此,要加载多个文件,您可以循环执行相同的操作:
document.querySelector("input").onchange = function() {
var files = this.files, fileReader;
for(var i = 0; i < files.length; i++) {
fileReader = new FileReader();
fileReader.onload = handler;
fileReader.readAsArrayBuffer(files[i]); // convert selected file
}
function handler() { // file is now ArrayBuffer:
var tiff = new Tiff({buffer: this.result}); // parse and convert
var canvas = tiff.toCanvas(); // convert to canvas
document.querySelector("div").appendChild(canvas); // show canvas with content
};
};
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<label>Select TIFF file: <input type=file multiple></label><div></div>