Look-up Tables

Over 40 LUTs are included in ome-zarr.js. We can list them all with getLuts(). Each lut.png is a data: URL of a 256 x 1 pixels png. Below these are displayed with a height of 15px:

omezarr.getLuts().forEach((lut) => {
  let html = `<legend>${lut.name}</legend> <img src="${lut.png}" />`;
  document.getElementById("luts").innerHTML += html;
});

We can lookup the rgb list for a lut by name:

let fireRgb = omezarr.getLutRgb("fire.lut")

However, if we want to allow tree shaking to skip bundling all the LUTs, we can import only the LUT we need:

let fireRgb = omezarr.luts.FIRE;

To render() with a LUT, we can set the lut to a list of rgb values:

let img = await omezarr.NgffImage.load(url);
img.setChannelLut(0, fireRgb);
let src = await img.render({targetSize: 300});

We can also supply our custom LUT of rgb values, which can be of any length:

let customRgbLut = [[255, 0, 0], [0, 255, 0], [0, 0, 255]];
img.setChannelLut(0, customRgbLut);

Click on a LUT below to re-render the image:

Image is from idr0062-blin-nuclearsegmentation.