I have gone through the tutorials available at: and also familiarized myself with the Fabric Objects documentation.
While I was successful in loading JPG and PNG images onto the canvas, my current project requires me to load TIFF images and apply filters on them. Despite being able to render TIFF images using the canvas context, I am facing issues when 'renderAll()' is called as it clears the context along with my TIFF image. Additionally, I am unable to perform operations like zoom, pan, brightness, and contrast since I cannot render the TIFF image.
I would greatly appreciate if someone could guide me on how to convert a TIFF image into a Fabric Object so that I can carry out standard fabric.Object related operations on it.
Below are the steps I have followed:
To load a mock TIFF image, I read it as an arraybuffer.
public loadMockTiffImage() { // Creating a new XMLHttpRequest object to read the mock TIFF image as ArrayBuffer const xhr = new XMLHttpRequest(); // Configuring it: GET-request for the URL xhr.open('GET', 'assets/tif/sample.tif', true); xhr.responseType = 'arraybuffer'; xhr.timeout = 10000; // timeout in ms, set to 10 seconds // Sending the request over the network xhr.send(); // Upon receiving the response, load it xhr.onload = () => { // Analyzing the HTTP status of the response if (xhr.status !== 200) { // Throw error in case status is not 200 console.log(`Error ${xhr.status}: ${xhr.statusText}`); } else { // Display the result console.log(`Done, received ${xhr.response.byteLength} bytes`); console.log(xhr.response); // Adding the XHR response which is of type ArrayBuffer to the canvas this.addTiffImageOnCanvas(xhr.response); } }; // Showing progress of loading the bytes xhr.onprogress = event => { if (event.lengthComputable) { console.log(`Received ${event.loaded} of ${event.total} bytes`); } else { console.log(`Received ${event.loaded} bytes`); // no Content-Length } }; // Logging any network request errors xhr.onerror = () => { console.log('Request failed!'); }; }Next, I utilize UTIF.js to decode the ArrayBuffer and convert it to ImageBitmap so that I can use canvas.drawImage() to render it on the canvas. How do I convert this ImageBitmap/ArrayBuffer to a FabricJS object?
private addTiffImageOnCanvas(buffer: ArrayBuffer) { // Using UTIF.js to decode the array buffer and convert it to ImageBitmap const ifds = UTIF.decode(buffer); UTIF.decodeImage(buffer, ifds[0]); const timage = ifds[0]; const array = new Uint8ClampedArray(UTIF.toRGBA8(timage)); // Forming image Data const imageData = new ImageData(array, timage.width, timage.height); let ibm: ImageBitmap = null; const bmPromise: Promise<ImageBitmap> = createImageBitmap(imageData); bmPromise.then(bitmap => { ibm = bitmap; fabric.Image.fromObject(ibm, image => { // TODO: How or What should I do now? }); });}
Your assistance in this matter would be highly appreciated.