DOCSEARCHbyAlgolia
Submit Docs

UTIF.js Documentation

repository·master·Indexed 19 days ago

https://github.com/photopea/utif.js

A lightweight and fast decoder and encoder for TIFF and EXIF files, including support for RAW formats like DNG, CR2, and NEF. Used by the Photopea image editor, it provides APIs for decoding TIFF/EXIF data, decompressing image pixels, converting to 8-bit RGBA, and encoding RGBA or EXIF data into binary formats.

Tokens
1.1K
Snippets
7
Records
8
Agent score
18%

What's inside UTIF.js

  2. Display TIFF images in HTML using UTIF.replaceIMG()

    master

    If you want to use TIFF, DNG, CR2, or NEF images directly in <img> tags without manual decoding, call UTIF.replaceIMG() once (e.g., on the body onload event). UTIF.js will automatically find these images and replace their src attribute with a base64-encoded PNG URI.

    <body onload="UTIF.replaceIMG()">
  <img src="image.tif" />
  <img src="dog.tif" />
</body>

  3. Complete Example: Decoding and displaying a TIFF via XHR

    master

    This example demonstrates the full workflow: fetching a TIFF file as an arraybuffer, decoding the IFDs, decompressing the first image, and converting it to a standard RGBA Uint8Array.

    function imgLoaded(e) {
  var ifds = UTIF.decode(e.target.response);
  UTIF.decodeImage(e.target.response, ifds[0]);
  var rgba  = UTIF.toRGBA8(ifds[0]);  // Uint8Array with RGBA pixels
  console.log(ifds[0].width, ifds[0].height, ifds[0]);
}

var xhr = new XMLHttpRequest();
xhr.open("GET", "my_image.tif");
xhr.responseType = "arraybuffer";
xhr.onload = imgLoaded;
xhr.send();

  4. Decode TIFF or EXIF data with UTIF.decode()

    master

    Use UTIF.decode(buffer) to parse a TIFF or EXIF file. It returns an array of Image File Directories (IFDs). Each IFD is an object where keys are TIFF tags (prefixed with t, e.g., tXYZ) and values are the tag values. This allows you to access image metadata (like dimensions) without decompressing the actual pixel data.

    // buffer is an ArrayBuffer containing TIFF or EXIF data
var ifds = UTIF.decode(buffer);

// Accessing metadata from the first IFD
var firstIfd = ifds[0];

  5. Convert TIFF to 8-bit RGBA with UTIF.toRGBA8()

    master

    Because TIFF files can have various color depths and channel counts, use UTIF.toRGBA8(ifd) to normalize the image. This function returns a Uint8Array containing the image in 8-bit RGBA format, which is ready for use with standard web APIs like context2d.putImageData().

    // ifd must be an IFD processed by UTIF.decodeImage()
var rgba = UTIF.toRGBA8(ifd);
// rgba is a Uint8Array with RGBA pixels

  6. Encode EXIF data with UTIF.encode()

    master

    To encode EXIF data into a binary format, use UTIF.encode(ifds). Pass an array of IFD objects (where each IFD is a JS object with properties like tXYZ). It returns an ArrayBuffer of the binary data.

    // ifds is an array of IFD objects
var binaryData = UTIF.encode(ifds);

  7. Decompress image pixels with UTIF.decodeImage()

    master

    To extract the actual pixel data from a specific IFD, use UTIF.decodeImage(buffer, ifd). This function modifies the provided ifd object by adding three new properties:

    • width: The width of the image.
    • height: The height of the image.
    • data: The decompressed pixel data.

    Note: The interpretation of data depends on the TIFF tags (color depth, channels, etc.).

    // buffer is an ArrayBuffer containing TIFF or EXIF data
// ifd is an element from the array returned by UTIF.decode()
UTIF.decodeImage(buffer, ifd);

console.log(ifd.width, ifd.height, ifd.data);

  8. Encode RGBA data to a TIFF file with UTIF.encodeImage()

    master

    To create a TIFF file from raw pixel data, use UTIF.encodeImage(rgba, w, h, metadata).

    • rgba: ArrayBuffer containing RGBA pixel data.
    • w: Image width.
    • h: Image height.
    • metadata (optional): An IFD object containing TIFF tags.

    Note: This method currently performs no compression.

    // returns ArrayBuffer of the binary TIFF file
var tiffBuffer = UTIF.encodeImage(rgbaBuffer, width, height, metadataObject);