How to read a .tif file using React.js or other Javascsript libraries?

Question

I want to read .tif files in my web program. I prefer to do it using react.js or something that will work with react. However, any javascript-based solution is good. The files I want to read contain geolocation-bound information. They have color coding for each pixel whose position is defined by longitude and latitude.

Answer 1

const Tiff = require('tiff.js');

function readTiff(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const tiff = new Tiff({ buffer: e.target.result });
      const canvas = tiff.toCanvas();
      resolve(canvas);
    };
    reader.readAsArrayBuffer(file);
  });
}

readTiff('file').then((canvas) => {
  // do something with the canvas
  console.log(canvas);
});