getting rid of <canvas> to display polygons on top of image with .tif extension-CodePudding

I am working with displaying polygons on an image using d3 svg and as shown below in the javascript code i am creating img tag element and appending it to 'template'and then appending svg to 'template' so that polygons appear on the image.

        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>

...

But I have a set of images with .tif extension and I am using seikichi/tiff Library but as shown below in the code the image is appended to an canvas element and that's how the image is displayed,

but as mentioned above I need 'img' tag not 'canvas' cause D3 doesnt use the canvas element,it needs the 'img' to be able to append svg on top of the image,

and thats why the images are displayed but polygons arent displayed on top of the image.I also tried to manipulate the.toCanvas() to work with svg but it is still not displaying the polygons on top of the image.

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

CodePudding user response：

You need to run your d3 function after the tiff was parsed.
Actually it shouldn't really matter if you're using an <img> or a <canvas> since your script is just appending an svg.
In other words: d3 doesn't change/redraw the actual image.

However you could easily convert the generated tiff-canvas to a data-URL and use it as src property in your <img> element.

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

Desktop batch onversion
As tiff.js is a rather complex library (1.5 MB) and tiff files are not natively supported by browsers, you should consider a batch conversion of your tiffs to jpg or png using a desktop application.

There's no shortage of free converters like (e.g gimp).

This way you get significantly smaller files as well as a better page/app performance.