javascript 将图像显示为 .tiff 或 .tif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31656949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display an image as .tiff or .tif
提问by Dehost
Not how to do this process and consulted but did not reach, if I can help.
不知道怎么做这个过程，咨询过但是没有达到，如果能帮帮忙。
probe what went something like this:
探查发生了什么事情是这样的：
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
context = document.getElementById("mycanvas").getContext("2d"),
img = new Image();
// wait until the image has been fully processed
img.onload = function() {
context.drawImage(img, 100, 100);
};
img.src = 'url_imagen';
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
With all the contributions realize but try and if it works.
所有的贡献都实现了，但尝试看看它是否有效。
Point run to desert, poker images having resolution jpg my delivers the following error:
指向沙漠，分辨率为 jpg 的扑克图像出现以下错误：
TIFFReadDirectory: Warning, Unknown field with tag 347 (0x15b) encountered. tiff_min.js (línea 103) 1.tiff: JPEG compression support is not configured. tiff_min.js (línea 103) 1.tiff: Sorry, requested compression method is not configured. tiff_min.js (línea 103) uncaught exception: [object Object]
TIFFReadDirectory：警告，遇到标签为 347 (0x15b) 的未知字段。tiff_min.js (línea 103) 1.tiff：未配置 JPEG 压缩支持。tiff_min.js (línea 103) 1.tiff：抱歉，未配置请求的压缩方法。tiff_min.js (línea 103) 未捕获异常：[object Object]
The probe code that is this:
探针代码是这样的：
Tiff.initialize({TOTAL_MEMORY: 19777216 * 10});
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', url);
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response,height:450});
var canvas = tiff.toCanvas();
//canvas.width = 700;
//canvas.height = 450;
div.html(canvas);
msn('Imagen cargada', "Imagen cargada con exito.");
};
xhr.send();
采纳答案by cviejo
As answered hereand here, it all comes down to browser support.
You can however get the image as binary data and display it using a library:
但是，您可以将图像作为二进制数据获取并使用库显示：
https://github.com/seikichi/tiff.js
https://github.com/seikichi/tiff.js
https://code.google.com/p/tiffus/
https://code.google.com/p/tiffus/
回答by Kanish Mathew
Displaying Tiff File in angular by displaying the image in the canvas.
通过在画布中显示图像以角度显示 Tiff 文件。
Download the 'tiff.min.js' from https://github.com/seikichi/tiff.jsand add the file to the 'src' folder.
从https://github.com/seikichi/tiff.js下载“tiff.min.js”并将文件添加到“src”文件夹。
Update the angular.json file with "scripts": [ "src/tiff.min.js"]
使用“脚本”更新 angular.json 文件：[“src/tiff.min.js”]
under "project"-> "architect" -> "build"->"options"->"scripts"
在“项目”->“架构师”->“构建”->“选项”->“脚本”下
Inside the ts file of the component add the following code:
在组件的 ts 文件中添加以下代码：
declare var Tiff: any; # declared globally outside the class
# inside the component class
let xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'src_of_image_to_be_displayed');
xhr.onload = (e) => {
let tiff = new Tiff({buffer: xhr.response});
let canvas = tiff.toCanvas();
document.body.append(canvas); # append to an div element
}
xhr.send();
