摆脱Lt; Canvas＆gt;用.tif扩展在图像上显示多边形

Question

我正在使用D3 SVG在图像上显示多边形，如下所示，在JavaScript代码中，我正在创建IMG标记元素，并将其附加到“模板”并将SVG附加到'Template'中，以便多边形出现在图像上。

        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不使用帆布元素，它需要“ 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功能。
实际上，您是否使用＆lt; img＆gt; 或＆lt; canvas＆gt; ，因为您的脚本只是附加了SVG。
。
换句话说：D3不会更改/重新绘制实际图像。

但是，您可以轻松地将生成的tiff-canvas转换为并将其用作＆lt; img＆gt; 元素中的 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文件进行本机的支持，因此您应该使用台式机应用程序考虑将tiffs的批量转换 。

不乏免费转换器，例如（例如 gimp ）。

这样，您将获得明显较小的文件以及更好的页面/应用程序性能。