JSFiddle - React, Tailwind, and code Playground

Bare Bones UTIF.js Example

by skibulk

HTML

<script src="https://cdn.jsdelivr.net/gh/photopea/UTIF.js/UTIF.js"></script>
<input id="browse" type="file">

JavaScript

// https://cdn.jsdelivr.net/gh/photopea/UTIF.js/UTIF.js

console.clear();
console.log(UTIF);

// Handle user file selection
document.getElementById("browse").onchange = function(event) {

  var file = event.target.files[0];
  var fileReader = new FileReader();
  fileReader.onload = function(event) {
  
    var ifds = UTIF.decode( fileReader.result );
    console.log(ifds);
    
    // Each page in a TIFF is represented by one Image File Directory
    for (var i = 0; i < ifds.length; i++) {
    
	    UTIF.decodeImage( fileReader.result, ifds[i] );
      
    	// Validate page
    	if( ifds[i].width ) {
      
        // RGBA Pixel Array
        var rgba  = UTIF.toRGBA8( ifds[i] );
        rgba = new Uint8ClampedArray( rgba );
        console.log(rgba);

        // Create Canvas element
        var myCanvas = document.createElement("canvas");
        myCanvas.width = ifds[i].width;
        myCanvas.height = ifds[i].height;

        // Add image to canvas and canvas to DOM
        var context = myCanvas.getContext('2d');
        var imageData = new ImageData(rgba, ifds[i].width, ifds[i].height);
        context.putImageData(imageData, 0, 0);
        document.body.appendChild(myCanvas);
      }
    }
	}

	fileReader.readAsArrayBuffer(file);
}