将图像显示为.tiff或.tif

Question

如果我可以帮忙的话，不是如何做这个过程并且咨询但没有达到。

探究这样的事情：

    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);

---

随着所有的贡献实现，但尝试，如果它的工作。

点跑到沙漠，扑克图像有分辨率jpg我发出以下错误：

TIFFReadDirectory：遇到标记347（0x15b）的警告，未知字段。 tiff_min.js（línea103）1.tiff：未配置JPEG压缩支持。 tiff_min.js（línea103）1.tiff：抱歉，未配置请求的压缩方法。 tiff_min.js（línea103）未捕获的异常：[object Object]

探测代码是这样的：

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();

Answer 1

正如here和here所说，这一切都取决于浏览器的支持。

但是，您可以将图像作为二进制数据获取并使用库显示它：

https://github.com/seikichi/tiff.js

https://code.google.com/p/tiffus/

https://github.com/GPHemsley/tiff-js

Answer 2

通过在画布中显示图像以角度显示Tiff文件。

从https://github.com/seikichi/tiff.js下载'tiff.min.js'并将文件添加到'src'文件夹中。

使用“scripts”更新angular.json文件：[“src / tiff.min.js”]

在“项目” - >“架构师” - >“构建” - >“选项” - >“脚本”下

在组件的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();