Example of loading a segmentation mask on the image. You can modify the mask using Brush tool. (press ctrl to delete instead of adding)

let demoFiles = []; let counter = 0; const getDemoFileNames = function () { let demoFileList = []; for (let i = 1; i < 25; i++) { let filename = "anon" + i; demoFileList.push(filename); } return demoFileList; }; // init all larvitar.initializeImageLoader(); larvitar.initializeCSTools(); larvitar.store.initialize(); larvitar.store.addViewport("viewer"); larvitar.registerNRRDImageLoader(); async function createFile(fileName, cb) { let response = await fetch("./demo/" + fileName); let data = await response.blob(); let file = new File([data], fileName); demoFiles.push(file); counter++; if (counter == 24) { cb(); } } function renderSerie() { larvitar.resetLarvitarManager(); larvitar.readFiles(demoFiles, function (seriesStack, err) { if (seriesStack) { // render the first series of the study let seriesId = _.keys(seriesStack)[0]; let serie = seriesStack[seriesId]; larvitar.renderImage(serie, "viewer").then(function () { larvitar.addDefaultTools(); demoFiles = []; loadMasks(); }); } else { console.log(err); } }); } let demoFileList = getDemoFileNames(); _.each(demoFileList, function (demoFile) { createFile(demoFile, renderSerie); }); /** * Load an image as in base example, then: **/ async function loadMasks() { larvitar.initSegmentationModule(); // fetch data let response = await fetch("./demo/" + "segmentation.nrrd"); let data = await response.blob(); let nrrd_file = new File([data], "segmentation.nrrd"); // read file let reader = new FileReader(); reader.readAsArrayBuffer(nrrd_file); reader.onload = function () { // create volume let volume = larvitar.importNRRDImage(reader.result); // define mask properties let properties = { // color: "#00ff00", opacity: 0.2, labelId: 0 }; // add to viewport larvitar .addSegmentationMask(properties, volume.data, "viewer") .then(() => { // activate brush on this labelmap larvitar.setActiveLabelmap(0, "viewer"); larvitar.setToolActive("Brush"); }); }; } let activeLabel = 1; function switchLabel() { let nextLabel = activeLabel == 1 ? 2 : 1; larvitar.setActiveSegment(nextLabel, "viewer"); activeLabel = nextLabel; let btn = document.getElementById("btn-label"); let btnClass = btn.className; if (activeLabel == 1) { btn.className = btnClass.replace("warning", "danger"); } else { btn.className = btnClass.replace("danger", "warning"); } } function undo() { larvitar.undoLastStroke("viewer"); } function redo() { larvitar.redoLastStroke("viewer"); } /** * Undo: larvitar.undoLastStroke("viewer"); * Redo: larvitar.redoLastStroke("viewer"); * Switch: larvitar.setActiveSegment(1|2, "viewer"); */