I recently encountered an issue with my code that utilizes fetch() to retrieve and convert .tiff images into an html5 canvas for display in a browser using tiff.js (https://github.com/seikichi/tiff.js/tree/master). While the functionality mostly works as intended, I have noticed that at times some images fail to load in the browser.
Upon encountering this problem, an error message appears in the browser stating:
ReferenceError: Tiff is not definedI am seeking guidance on how to ensure successful creation of these objects and would appreciate any insights into the root cause behind this behavior.
class tiffImage {
constructor() {
this.tiffURL = 'url-to-image';
this.height;
this.width;
this.canvas;
}
async loadImage() {
fetch(this.tiffURL)
// retrieve tiff and convert it to an html5 canvas
let response = await fetch(this.tiffURL);
let buffer = await response.arrayBuffer();
let tiff = new Tiff({buffer: buffer}); // error points to this line
this.canvas = tiff.toCanvas();
/* Parse some data from image and do DOM stuff */
}
}
// retrieve and display boards
let someTiff1 = new tiffImage();
let someTiff2 = new tiffImage();
let someTiff3 = new tiffImage();
let someTiff4 = new tiffImage();
let someTiff5 = new tiffImage();
someTiff1.loadImage();
someTiff2.loadImage();
someTiff3.loadImage();
someTiff4.loadImage();
someTiff5.loadImage();
As of now, there seems to be inconsistency in loading all images successfully. Sometimes all images load properly, while other times they do not. Even after refreshing the page multiple times, certain images consistently fail to load. It's important to note that in my actual project, I am calling loadImage() on 13 different objects.