摆脱<canvas>在带有 .tif 扩展名的图像顶部显示多边形

Question

我正在使用 d3 svg 在图像上显示多边形，如下面的 javascript 代码所示，我正在创建 img 标签元素并将其附加到“模板”，然后将 svg 附加到“模板”，以便多边形出现在图像上。

        var template = document.createElement('div');
         var img = document.createElement('img');
             img.setAttribute("src", imagesource);
             template.appendChild(img);
       var bb = d3.select(template).append("svg")
                        .attr("width",width)
                        .attr("height",height)
                        .attr("id", "polygons");

...

    <img src="TSU/images/21021.jpg">
        <svg width="1920" height="1080" id="polygons">
          <g><rect x="1296 " y="229 " height="231" width="250" stroke="red"></rect>
      </g>
       </svg>

...

但是我有一组带有 .tif 扩展名的图像，我正在使用 seikichi/tiff 库，但如下代码所示，图像被附加到画布元素，这就是图像的显示方式，

但如上所述，我需要'img'标签而不是'canvas'，因为D3不使用canvas元素，它需要'img'才能在图像顶部附加svg，

这就是为什么显示图像但多边形没有显示在图像顶部的原因。我还尝试操纵 .toCanvas() 以使用 svg，但它仍然没有在图像顶部显示多边形。

            var xhr = new XMLHttpRequest();
            xhr.responseType = 'arraybuffer';
            xhr.open('GET', imagesource);
            xhr.onload = function (e) {
           var tiff = new Tiff({buffer: xhr.response});
           var canvas = tiff.toCanvas();
           template.append(canvas)

           };
          xhr.send();

Answer 1

解析tiff后，您需要运行 d3 函数。
实际上，您使用<img>还是<canvas>并不重要，因为您的脚本只是附加了一个 svg。
换句话说：d3 不会更改/重绘实际图像。

但是，您可以轻松地将生成的 tiff-canvas 转换为数据 URL ，并将其用作<img>元素中的src属性。

let imgSrc = 'test.tif';
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', imgSrc);
xhr.onload = function (e) {
    var tiff = new Tiff({
        buffer: xhr.response
    });
    var canvas = tiff.toCanvas();
    var dataURL = canvas.toDataURL();
    var template = document.createElement('div');
    document.body.append(template);

    var img = document.createElement('img');
    img.setAttribute("src", dataURL);
    template.appendChild(img);

    var width = canvas.width;
    var height = canvas.height;

    var bb = d3.select(template).append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("id", "polygons")
        .append('rect')
        .attr("x", "50%")
        .attr("y", "50%")
        .attr("height", "25%")
        .attr("width", "25%")
        .attr("fill", "red");

};
xhr.send();

桌面批量转换
由于 tiff.js 是一个相当复杂的库 (1.5 MB) 并且浏览器本身不支持 tiff 文件，因此您应该考虑使用桌面应用程序将 tiff批量转换为 jpg 或 png。

不乏像（例如gimp ）这样的免费转换器。

通过这种方式，您可以获得更小的文件以及更好的页面/应用程序性能。