- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我用来从输入元素加载文件的 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();
但您首先需要将 File 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 - 使用 seikichi/tiff 库显示现有的 TIFF 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42847915/
在我们用 ASP .NET 构建的 Web 应用程序中,需要允许用户查看 TIFF 图像文件,但不能打印、保存或复制这些文档。我们了解用户可能会打印屏幕,因此没有任何解决方案是 100% 万无一失的。
我有存储 TIFF 图像的旧 Eastman/eiStream/OpenText 文档库。 部分 TIFF 带有注释,注释存储在 TIFF 头中;这些我可以找到 TIFF 标题布局的规范和注释本身的布
并非所有图像阅读器都支持 BigTIFF,我想根据文件的 TIFF 格式识别文件。如何确定现有 tiff 文件是以标准 TIFF 格式编写的,还是使用 BigTIFF 格式编写的? 最佳答案 pyth
我使用 FreeImage 处理多页 TIFF 文件,有时我在 FIBITMAP 中有一个 TIFF 页面,我需要知道它的压缩情况。知道如何做到这一点吗? 最佳答案 FreeImage 没有内置函数来
我在目录 c:\temp 中有 600 个 TIFF 文件。 文件名如下: 001_1.tif, 001_2.tif, 001_3.tif 002_1.tif, 002_2.tif, 002_3.ti
我正在使用 netbeans 平台用 java 制作 DesktopApp。在我的应用程序中,我使用 16 位、tiff、灰度图像并对该图像进行处理。现在,我想使用 16 位、tiff、灰度图像(或
在我的场景中,我有 3 个或更多的多页 tiff 图像,我需要将它们合并成一个 tiff 图像。 下面是我试过的代码。它合并到单个 tiff 图像中,但仅与所有 tiff 图像的第一页合并。 priv
我想在选定的点添加图像的温度数据。它是否有任何预定义的属性,或者我们是否可以在 Tiff 文件中创建自定义/私钥来存储图像的温度数据。 回答: 使用 TIFF 库文档在 TIFF 文件中创建您自己的自
我已经编写了多个程序变体。该程序的目的是将“任何文件类型”转换为该文件的 TIFF 图像表示形式,就像使用打印机打印一样。 我目前正在使用我向其发送文件的第三方打印机驱动程序,它输出一个 TIFF 图
我在 Windows 7 32/64 位上使用 VS2008。 我正在尝试使用 IPP 处理 tiff 图像。我做了一些搜索,但没有发现英特尔 IPP 加载 tiff 图像的任何可能性。所以我使用 l
这是我用来从输入元素加载文件的 JavaScript 代码。图片格式包括jpeg、png、tiff。 $(document).ready(function() { FileDetails = fu
我正在使用 c++ JUCE 库学习 gui 编程。该库支持图像文件格式(png、jpg)。但我想了解如何使用其他文件格式,例如 tiff。 在谷歌之后我得到了 libtiff。 我的问题是显示它的准
我正在使用 urlmon.dll 中的 FindMimeFromData 来嗅探上传文件的 MIME 类型。根据MIME Type Detection in Internet Explorer , i
我发现,通过谷歌,很多人问同样的问题,但没有解决方案。 Python 图像库 (PIL) 具有用于单步执行现有多页 TIFF 的工具,但没有创建它们的工具。 库有望在 Windows 上可用,适用于
我正在尝试使用 iText 7.1.1 将 TIFF 图像转换为具有多页的 PDF 文件。感谢那些让我开始阅读这篇文章的人 Create PDF from TIFF image using iText
在本节中,我将头文件添加到 tiff 文件的顶部。 echo "/CourierLatin1 findfont 8 scalefont setfont" >>${PS} echo "40 2 move
对于 OCR 引擎,我需要为 OCR 引擎提供带有 CCITT4 压缩的 TIFF 文件。我们的扫描仪输出 JPEG 压缩的 TIFF 文件。我想用 C# 转换这些文件,使用 System.Drawi
我有 5 个单页 tiff 图像。我想将所有这 5 张 tiff 图像组合成一张多页 tiff 图像。我正在使用 Java 高级成像 API。看了SUN给的JAI API文档和教程。我是 JAI 的新
我需要一个 C# 函数,它将采用 8 位灰度 TIFF 的 Byte[],并返回 1 位(黑白)TIFF 的 Byte[]。 我对使用 TIFF 还很陌生,但一般的想法是我们需要将它们从灰度或彩色转换
我想在 TIFF 文件中操作 RGB 波段并在 matplotlib 上输出 灰度 贴图。到目前为止我有这段代码,但我无法在灰度上得到它: import scipy as N import gdal
我是一名优秀的程序员,十分优秀!