### Initialize Cornerstone WADO Image Loader with Web Workers

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Configure the external cornerstone dependency and initialize the web worker manager before loading images. This setup is required once at application startup.

```javascript
import cornerstone from 'cornerstone-core';
import dicomParser from 'dicom-parser';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

const config = {
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false,
      strict: false,
    },
  },
};

cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
```

--------------------------------

### Configure WADO Image Loader

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

Configure WADO Image Loader, for example, to add custom headers before sending requests. This is useful for authentication.

```javascript
cornerstoneWADOImageLoader.configure({
    beforeSend: function(xhr) {
        // Add custom headers here (e.g. auth tokens)
        //xhr.setRequestHeader('APIKEY', 'my auth token');
    },
});
```

--------------------------------

### Cornerstone WADO Image Loader Utility Functions

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Provides utility functions for color space conversion, getting min/max pixel values, checking if an image is color, parsing image IDs, and retrieving pixel data from WADO-RS responses.

```javascript
// Color space converters
const {
  convertRGBColorByPixel,
  convertRGBColorByPlane,
  convertYBRFullByPixel,
  convertYBRFullByPlane,
  convertPALETTECOLOR
} = cornerstoneWADOImageLoader;

// Get min/max pixel values
const pixelData = image.getPixelData();
const minMax = cornerstoneWADOImageLoader.getMinMax(pixelData);
console.log('Min:', minMax.min, 'Max:', minMax.max);

// Check if image is color
const isColor = cornerstoneWADOImageLoader.isColorImage(
  imageFrame.photometricInterpretation
);

// Parse image ID to extract components
const parsedId = cornerstoneWADOImageLoader.wadouri.parseImageId(
  'wadouri:https://example.com/dicom/image.dcm?frame=2'
);
console.log('Scheme:', parsedId.scheme);  // 'wadouri'
console.log('URL:', parsedId.url);        // 'https://example.com/dicom/image.dcm'
console.log('Frame:', parsedId.frame);    // 2

// Get pixel data from WADO-RS response
cornerstoneWADOImageLoader.wadors.getPixelData(
  imageURI,
  imageId,
  'multipart/related; type=application/octet-stream'
).then(function(result) {
  console.log('Content-Type:', result.contentType);
  console.log('Pixel data:', result.imageFrame.pixelData);
});

```

--------------------------------

### Load and Display Multiframe DICOM Image

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadourimultiframe/index.html

Loads a DICOM P10 multiframe SOP instance from a URL, determines the number of frames, creates imageIds, and displays the first frame using Cornerstone. It also initializes tools and starts playing the clip if it's the first load.

```javascript
function loadAndViewImage(url) {
    var element = document.getElementById('dicomImage');
    // since this is a multi-frame example, we need to load the DICOM SOP Instance into memory and parse it
    // so we know the number of frames it has so we can create the array of imageIds
    // so we know the number of frames it has so we can create the stack. Calling load() will increment the reference
    // count so it will stay in memory until unload() is explicitly called and all other reference counts
    // held by the cornerstone cache are gone. See below for more info
    cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.load(url, cornerstoneWADOImageLoader.internal.xhrRequest).then(function(dataSet) {
        // dataset is now loaded, get the # of frames so we can build the array of imageIds
        var numFrames = dataSet.intString('x00280008');
        var FrameRate = 1000/dataSet.floatString('x00181063');
        if(!numFrames) {
            alert('Missing element NumberOfFrames (0028,0008)');
            return;
        }
        var imageIds = []
        var imageIdRoot = 'wadouri:' + url;
        for(var i=0; i < numFrames; i++) {
            var imageId = imageIdRoot + "?frame="+i;
            imageIds.push(imageId);
        }
        var stack = {
            currentImageIdIndex : 0,
            imageIds: imageIds
        };
        // Load and cache the first image frame. Each imageId cached by cornerstone increments
        // the reference count to make sure memory is cleaned up properly.
        cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) {
            console.log(image);
            // now that we have an image frame in the cornerstone cache, we can decrement
            // the reference count added by load() above when we loaded the metadata. This way
            // cornerstone will free all memory once all imageId's are removed from the cache
            cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.unload(url);
            cornerstone.displayImage(element, image);
            if(loaded === false) {
                cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
                // Set the stack as tool state
                cornerstoneTools.addStackStateManager(element, ['stack', 'playClip']);
                cornerstoneTools.addToolState(element, 'stack', stack);
                // Start playing the clip
                cornerstoneTools.playClip(element, FrameRate);
                loaded = true;
            }
        }, function(err) {
            alert(err);
        });
    /*} catch(err) { alert(err); }*/
    });
}
```

--------------------------------

### Monitor Image Loading Progress Events

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Use these event listeners to track the lifecycle of an image load request, including progress updates, start, and completion. Ensure the imageId is correctly formatted for the loader.

```javascript
// Listen for image load progress
cornerstone.events.addEventListener('cornerstoneimageloadprogress', function(event) {
  const { imageId, percentComplete, loaded, total } = event.detail;

  console.log(`Loading ${imageId}: ${percentComplete}%`);
  console.log(`${loaded} of ${total} bytes`);

  // Update progress bar
  const progressBar = document.getElementById('progressBar');
  progressBar.style.width = percentComplete + '%';
  progressBar.textContent = percentComplete + '%';
});

// Listen for image load start
cornerstone.events.addEventListener('cornerstoneimageloadstart', function(event) {
  console.log('Started loading:', event.detail.imageId);
});

// Listen for image loaded
cornerstone.events.addEventListener('cornerstoneimageloaded', function(event) {
  console.log('Loaded:', event.detail.image.imageId);
});

// Load with progress tracking
cornerstone.loadAndCacheImage('wadouri:https://example.com/large-image.dcm');
```

--------------------------------

### Toggle VOI LUT Application

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

This event listener toggles the application of the Value of Interest (VOI) Look-Up Table (LUT) to the displayed image. It checks the state of a checkbox, gets the current image and viewport, and then either applies or removes the `voiLUT` from the viewport before updating it.

```javascript
document.getElementById('toggleVOILUT').addEventListener('click', function() {
  var applyVOILUT = document.getElementById('toggleVOILUT').checked;
  console.log('applyVOILUT=', applyVOILUT);
  var image = cornerstone.getImage(element);
  var viewport = cornerstone.getViewport(element);
  if(applyVOILUT) {
    viewport.voiLUT = image.voiLUT;
  } else {
    viewport.voiLUT = undefined;
  }
  cornerstone.setViewport(element, viewport);
});
```

--------------------------------

### Initialize and Load WADO-RS Image

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadors/index.html

Configures the loader with custom headers, fetches metadata, and enables the Cornerstone element for rendering.

```javascript
window.cornerstoneWADOImageLoader || document.write('<script src="https://unpkg.com/cornerstone-wado-image-loader">\x3C/script>') cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.configure({ beforeSend: function(xhr) { // Add custom headers here (e.g. auth tokens) const apiKey = document.getElementById('apikey').value; if(apiKey && apiKey.length) { xhr.setRequestHeader('APIKEY', apiKey); } } }); let loaded = false; function loadAndViewImage(imageId) { const element = document.getElementById('dicomImage'); //try { cornerstone.loadImage(imageId).then(function(image) { console.log(image); const viewport = cornerstone.getDefaultViewportForImage(element, image); cornerstone.displayImage(element, image, viewport); if(loaded === false) { cornerstoneTools.mouseInput.enable(element); cornerstoneTools.mouseWheelInput.enable(element); cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel loaded = true; } }, function(err) { alert(err); }); /\} catch(err) { alert(err); \}*/ } function getImageFrameURI(metadataURI, metadata) { // Use the BulkDataURI if present int the metadata if(metadata["7FE00010"] && metadata["7FE00010"].BulkDataURI) { return metadata["7FE00010"].BulkDataURI } // fall back to using frame #1 return metadataURI + '/frames/1'; } function downloadAndView() { const url = document.getElementById('wadoURL').value; const metadataURI = url + "/metadata"; const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // Make sure it's a JSON document data = JSON.parse(this.responseText); console.log(data); const metadata = data[0]; const imageFrameURI = getImageFrameURI(metadataURI, metadata); const imageId = 'wadors:' + imageFrameURI; cornerstoneWADOImageLoader.wadors.metaDataManager.add(imageId, metadata); // image enable the dicomImage element and activate a few tools loadAndViewImage(imageId); } }; xhr.open("GET", metadataURI, true); xhr.setRequestHeader('Accept', 'application/json'); xhr.send(); } cornerstone.events.addEventListener('cornerstoneimageloadprogress', function(event) { const eventData = event.detail; const loadProgress = document.getElementById('loadProgress'); loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`; }); const element = document.getElementById('dicomImage'); cornerstone.enable(element); document.getElementById('downloadAndView').addEventListener('click', function() { downloadAndView(); }); const form = document.getElementById('form'); form.addEventListener('submit', function() { downloadAndView(); return false; });
```

--------------------------------

### Configure cornerstoneWADOImageLoader

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadourimultiframe/index.html

Configure the cornerstoneWADOImageLoader, including setting up a beforeSend callback for custom headers like authentication tokens.

```javascript
window.cornerstoneWADOImageLoader || document.write('<script src="https://unpkg.com/cornerstone-wado-image-loader">\x3C/script>')
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.configure({
    beforeSend: function(xhr) {
        // Add custom headers here (e.g. auth tokens)
        //xhr.setRequestHeader('x-auth-token', 'my auth token');
    }
});
```

--------------------------------

### Configure Cornerstone WADO Image Loader

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/docs/Configuration.md

Use this method to set up global configuration options for the WADO image loader. Options include callbacks for network requests, progress, and error handling.

```javascript
cornerstoneWADOImageLoader.configure(options);
```

--------------------------------

### Get URL Without Frame Parameter

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

This utility function retrieves a URL from an input element and removes any 'frame=' parameter if present. This is useful for operations that require the base URL of a multi-frame image.

```javascript
function getUrlWithoutFrame() {
  var url = document.getElementById('wadoURL').value;
  var frameIndex = url.indexOf('frame=');
  if(frameIndex !== -1) {
    url = url.substr(0, frameIndex-1);
  }
  return url;
}
```

--------------------------------

### Initialize and Load Progressive Images

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/progressive-jph/index.html

Sets up Cornerstone viewports and loads images using the custom request function.

```javascript
cornerstoneWADOImageLoader.external.cornerstone = cornerstone; const baseUrls = [ 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/1.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-1.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-2.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-3.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-4.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-5.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-6.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-7.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-8.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-9.jph.dcm', 'https://pacsbin-util.s3.amazonaws.com/test-images/htj2k/xray-10.jph.dcm', ]; const urls = []; const cachebust = true; for (let i = 0; i < 20; i += 1) { let url = baseUrls[i % 11]; if (cachebust) { url += '?cachebust=' + (Math.random() + 1).toString(36).substring(7); } urls.push(url) } urls.forEach(url => { // Create element const viewportContainer = document.getElementById('viewports'); const viewportDiv = document.createElement('div'); viewportDiv.classList = 'disable-selection noIbar' viewportDiv.style = 'width:200px;height:200px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;' viewportDiv.onmousedown = 'return false;' const canvasDiv = document.createElement('div'); canvasDiv.style = 'width:200px;height:200px;'; viewportDiv.append(canvasDiv) viewportContainer.append(viewportDiv) const element = canvasDiv; cornerstone.enable(element); const imageId = `wadouri:${url}`; let loaded = false; canvasDiv.onmouseover = () => { canvasDiv.style.position = 'absolute' canvasDiv.style.width = '512px' canvasDiv.style.height = '512px' canvasDiv.style.zIndex = '10'; cornerstone.resize(element, true); } canvasDiv.onmouseout = () => { canvasDiv.style.position = 'relative'; canvasDiv.style.width = '200px' canvasDiv.style.height = '200px' canvasDiv.style.zIndex = '1'; cornerstone.resize(element, true); } // Load more of the image on click canvasDiv.addEventListener('click', async function (e) { const ee = cornerstone.getEnabledElement(element); const { sharedCacheKey: uri } = ee.image; const dataSet = cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.get(uri); const newDataSet = await dataSet.fetchMore({ lengthToFetch: 500000, }); console.log(newDataSet); // Not sure how much of this should be handled automatically inside // cornerstoneWADOImageLoader, vs explicitly in user scripts. It // would probably be helpful for everything below here to be one // function call or automatic upon invoking `fetchMore`. cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.update(uri, newDataSet) const imageId = "wadouri:" + uri; cornerstone.imageCache.removeImageLoadObject(imageId) cornerstone.loadAndCacheImage(imageId).then((image) => { cornerstone.invalidate(element); cornerstone.displayImage(element, image) }) }); try { var start = new Date().getTime(); cornerstone.loadAndCacheImage(imageId, { loader: request }).then(function (image) { console.log(image); var viewport = cornerstone.getDefaultViewportForImage(element, image); // document.getElementById('toggleModalityLUT').checked = (viewport.modalityLUT !== undefined); // document.getElementById('toggleVOILUT').checked = (viewport.voiLUT !== undefined); cornerstone.displayImage(element, image, viewport); if (loaded === false) { cornerstoneTools.mouseInput.enable(element); cornerstoneTools.mouseWheelInput.enable(element); cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wh
```

--------------------------------

### Configure Cornerstone WADO Image Loader Options

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Configure global options for HTTP requests, callbacks for image loading events, and decoder settings. This allows customization of authentication headers, progress monitoring, and error handling.

```javascript
cornerstoneWADOImageLoader.configure({
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer my-auth-token');
    xhr.setRequestHeader('APIKEY', 'my-api-key');
  },

  onprogress: function(event, params) {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100);
      console.log(`Download progress: ${percentComplete}%`);
    }
  },

  onloadend: function(event, params) {
    console.log('Download completed for:', params.imageId);
  },

  errorInterceptor: function(error) {
    console.error('Load error:', error.status, error.response);
  },

  imageCreated: function(image) {
    console.log('Image created with dimensions:', image.width, image.height);
  },

  decodeConfig: {
    convertFloatPixelDataToInt: true,
    use16BitDataType: false,
  },

  strict: false,
});
```

--------------------------------

### Manage DICOM Dataset Cache

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Provides functionality to check if a dataset is loaded, preload datasets, retrieve cached datasets, get cache statistics, unload specific datasets, purge the entire cache, and listen for cache events.

```javascript
const dataSetCacheManager = cornerstoneWADOImageLoader.wadouri.dataSetCacheManager;

// Check if a dataset is already loaded
const url = 'https://example.com/dicom/CT0001.dcm';
const isLoaded = dataSetCacheManager.isLoaded(url);
console.log('Dataset loaded:', isLoaded);

// Preload a dataset without displaying it
dataSetCacheManager.load(url).then(function(dataSet) {
  console.log('Dataset preloaded');

  // Access DICOM elements from the cached dataset
  const patientName = dataSet.string('x00100010');
  const studyDate = dataSet.string('x00080020');
  console.log('Patient:', patientName);
  console.log('Study Date:', studyDate);
});

// Get a cached dataset
const cachedDataSet = dataSetCacheManager.get(url);
if (cachedDataSet) {
  console.log('Found cached dataset');
}

// Get cache statistics
const cacheInfo = dataSetCacheManager.getInfo();
console.log('Cache size:', cacheInfo.cacheSizeInBytes, 'bytes');
console.log('Cached datasets:', cacheInfo.numberOfDataSetsCached);

// Unload a specific dataset to free memory
dataSetCacheManager.unload(url);

// Purge entire cache
dataSetCacheManager.purge();

// Listen for cache events
cornerstone.events.addEventListener('datasetscachechanged', function(event) {
  const { uri, action, cacheInfo } = event.detail;
  console.log(`Dataset ${action}:`, uri);
  console.log('Current cache size:', cacheInfo.cacheSizeInBytes);
});
```

--------------------------------

### Initialize Web Worker Manager (Minimal Configuration)

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/docs/WebWorkers.md

This is a minimal configuration for the web worker manager. It sets the maximum number of web workers based on available hardware concurrency and enables on-demand worker startup.

```javascript
var config = {
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
};
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
```

--------------------------------

### Configuration Options

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/docs/Configuration.md

The cornerstoneWADOImageLoader.configure method allows you to customize the image loader's behavior by providing an options object. This object can include callbacks for network requests, image creation, and error handling.

```APIDOC
## POST /cornerstoneWADOImageLoader/configure

### Description
Configures the Cornerstone WADO Image Loader with custom options.

### Method
POST

### Endpoint
/cornerstoneWADOImageLoader/configure

### Parameters
#### Request Body
- **options** (object) - Required - An object containing configuration options.
  - **beforeSend** (function) - Optional - A callback executed before a network request is sent. Receives the XMLHttpRequest object.
  - **onloadend** (function) - Optional - A callback triggered when an image download ends. Receives the event and params object.
  - **onreadystatechange** (function) - Optional - A callback triggered on request state changes. Receives the event and params object.
  - **onprogress** (function) - Optional - A callback triggered on download progress events. Receives the event and params object.
  - **errorInterceptor** (function) - Optional - A callback to handle errors. Receives an Error object with `request`, `response`, and `status` properties.
  - **imageCreated** (function) - Optional - A callback allowing modification of newly created image objects.
  - **decodeConfig** (object) - Optional - Configuration for the image decoder.
  - **strict** (boolean) - Optional - Enables strict mode for image decoding.

### Request Example
```json
{
  "options": {
    "beforeSend": "function(xhr) { ... }",
    "onloadend": "function(evt, params) { ... }",
    "errorInterceptor": "function(error) { ... }",
    "strict": true
  }
}
```

### Response
#### Success Response (200)
Indicates that the configuration was applied successfully. No specific response body is returned.

#### Response Example
(No response body)
```

--------------------------------

### Initialize Cornerstone and Load Local Files

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/dicomfile/index.html

Enables a DOM element for Cornerstone and registers a file input change listener to load DICOM files via the WADO file manager.

```javascript
const element = document.getElementById('dicomImage'); cornerstone.enable(element); document.getElementById('selectFile').addEventListener('change', function(e) { // Add the file to the cornerstoneFileImageLoader and get unique // number for that file const file = e.target.files[0]; const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file); loadAndViewImage(imageId); });
```

--------------------------------

### Initialize Cornerstone and Tools

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadourimultiframe/index.html

Enables the Cornerstone element, along with mouse input and wheel input tools. It also sets up event listeners for a button click and form submission to trigger image loading.

```javascript
const element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.mouseWheelInput.enable(element);
document.getElementById('downloadAndView').addEventListener('click', function(e) {
    downloadAndView();
});
const form = document.getElementById('form');
form.addEventListener('submit', function() {
    downloadAndView();
    return false;
});
document.getElementById('toggleCollapseInfo').addEventListener('click', function() {
    if (document.getElementById('co
```

--------------------------------

### Include Cornerstone and WADO Image Loader

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

Include Cornerstone and WADO Image Loader scripts. Ensure Cornerstone is configured to use WADO Image Loader.

```javascript
window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')
window.cornerstoneWADOImageLoader || document.write('<script src="https://unpkg.com/cornerstone-wado-image-loader">\x3C/script>')
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
```

--------------------------------

### Initialize Cornerstone WADO Image Loader with Dynamic Imports

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Configure cornerstoneWADOImageLoader to use dynamic imports for WebAssembly codecs. This improves performance and reduces the initial bundle size by loading codecs on demand. Ensure WebAssembly codec files are copied to your build output.

```javascript
// Import using dynamic import build
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js';

// Or configure webpack alias
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'cornerstone-wado-image-loader':
        'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js',
    },
  },
  plugins: [
    // Copy WASM codec files to build output
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/cornerstone-wado-image-loader/dist/dynamic-import',
          to: 'codecs',
          globOptions: {
            ignore: ['**/*.js', '**/*.js.map'],
          },
        },
      ],
    }),
  ],
};

// Initialize as normal - codecs load automatically when needed
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.webWorkerManager.initialize({
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false, // Load codecs on-demand
    },
  },
});

```

--------------------------------

### Enable Cornerstone and Add Event Listeners

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

This code enables the cornerstone library on a specified DOM element and sets up event listeners for various buttons: 'downloadAndView', 'load', 'unload', and 'purge'. It also handles form submission for downloading and viewing.

```javascript
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
document.getElementById('downloadAndView').addEventListener('click', function(e) {
  downloadAndView();
});
document.getElementById('load').addEventListener('click', function(e) {
  var url = getUrlWithoutFrame();
  cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.load(url);
});
document.getElementById('unload').addEventListener('click', function(e) {
  var url = getUrlWithoutFrame();
  cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.unload(url);
});
document.getElementById('purge').addEventListener('click', function(e) {
  cornerstone.imageCache.purgeCache();
});
const form = document.getElementById('form');
form.addEventListener('submit', function() {
  downloadAndView();
  return false;
});
```

--------------------------------

### Dynamic Import for Cornerstone WADO Image Loader

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/README.md

Use this import statement to enable dynamic codec loading. This reduces initial bundle size by loading codecs only when they are needed.

```javascript
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js';
```

--------------------------------

### Configure cornerstoneWADOImageLoader

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/dicomfile/index.html

Configure cornerstoneWADOImageLoader with custom request headers, such as authentication tokens, before sending requests. This is useful for integrating with secured backend services.

```javascript
window.cornerstoneWADOImageLoader || document.write('<script src="https://unpkg.com/cornerstone-wado-image-loader">\x3C/script>')
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

cornerstoneWADOImageLoader.configure({
    beforeSend: function(xhr) {
        // Add custom headers here (e.g. auth tokens)
        //xhr.setRequestHeader('x-auth-token', 'my auth token');
    },
});
```

--------------------------------

### Configure and Manage Web Workers

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Initializes the web worker manager with configuration options, retrieves worker statistics, adds custom tasks with priorities, changes task priorities, cancels tasks, and terminates all workers.

```javascript
const webWorkerManager = cornerstoneWADOImageLoader.webWorkerManager;

// Initialize with configuration
webWorkerManager.initialize({
  maxWebWorkers: navigator.hardwareConcurrency || 4,
  startWebWorkersOnDemand: true,
  webWorkerTaskPaths: [],
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false,
      strict: false,
    },
  },
});

// Get worker statistics
const stats = webWorkerManager.getStatistics();
console.log('Max workers:', stats.maxWebWorkers);
console.log('Active workers:', stats.numWebWorkers);
console.log('Queued tasks:', stats.numTasksQueued);
console.log('Executing tasks:', stats.numTasksExecuting);
console.log('Completed tasks:', stats.numTasksCompleted);
console.log('Total task time:', stats.totalTaskTimeInMS, 'ms');
console.log('Total delay time:', stats.totalTimeDelayedInMS, 'ms');

// Add a custom task with priority (lower number = higher priority)
const taskResult = webWorkerManager.addTask(
  'decodeTask',           // task type
  { /* task data */ },    // data to pass to worker
  5,                      // priority (default decode tasks use 5)
  []                      // optional transferList
);

// Handle task completion
taskResult.promise.then(function(result) {
  console.log('Task completed:', result);
}).catch(function(error) {
  console.error('Task failed:', error);
});

// Change task priority while queued
webWorkerManager.setTaskPriority(taskResult.taskId, 1); // Higher priority

// Cancel a queued task
webWorkerManager.cancelTask(taskResult.taskId, 'User cancelled');

// Terminate all workers
webWorkerManager.terminate();
```

--------------------------------

### Monitor Image Loading Progress

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/dicomfile/index.html

Listens for the cornerstoneimageloadprogress event to update the UI with the current loading percentage.

```javascript
cornerstone.events.addEventListener('cornerstoneimageloadprogress', function(event) { const eventData = event.detail; const loadProgress = document.getElementById('loadProgress'); loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`; });
```

--------------------------------

### Copy WASM Files with CopyWebpackPlugin

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/README.md

Use CopyWebpackPlugin to ensure WASM codec files are available in the build directory. Adjust the 'from' path based on your project structure.

```javascript
plugins: [
 new CopyWebpackPlugin([
 {
 from:
        '../../../node_modules/cornerstone-wado-image-loader/dist/dynamic-import',
 to:
        DIST_DIR,
 },
 ]),
]
```

--------------------------------

### Inject Cornerstone instance

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/changelog.md

Required when using module systems to ensure the loader correctly identifies its dependencies.

```javascript
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
```

--------------------------------

### Initialize Web Worker Manager and Load DICOM Image

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/customWebWorkerTask/index.html

Initializes the cornerstoneWADOImageLoader web worker manager and provides functions to load and display DICOM images from a WADO-URI source.

```javascript
window.cornerstoneWADOImageLoader || document.write('<script src="https://unpkg.com/cornerstone-wado-image-loader">\x3C/script>') // Initialize the web worker manager with our custom web worker task // window.customWebWorkerConfig contains custom web worker config and a fallback in case there is no dist folder config = window.customWebWorkerConfig; cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.webWorkerManager.initialize(config); document.getElementById('numWebWorkers').textContent = config.maxWebWorkers; let loaded = false; let loadedImage; function loadAndViewImage(imageId) { const element = document.getElementById('dicomImage'); try { const start = new Date().getTime(); cornerstone.loadAndCacheImage(imageId).then(function(image) { console.log(image); loadedImage = image; updateStatistics(); const viewport = cornerstone.getDefaultViewportForImage(element, image); cornerstone.displayImage(element, image, viewport); if(loaded === false) { cornerstoneTools.mouseInput.enable(element); cornerstoneTools.mouseWheelInput.enable(element); cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel loaded = true; } }, function(err) { alert(err); }); } catch(err) { alert(err); } } function downloadAndView(){ let url = document.getElementById('wadoURL').value; // prefix the url with wadouri: so cornerstone can find the image loader url = "wadouri:" + url; // image enable the dicomImage element and activate a few tools loadAndViewImage(url); } function getUrlWithoutFrame() { const url = document.getElementById('wadoURL').value; const frameIndex = url.indexOf('frame='); if(frameIndex !== -1) { url = url.substr(0, frameIndex-1); } return url; } function updateStatistics() { var stats = cornerstoneWADOImageLoader.webWorkerManager.getStatistics(); document.getElementById('maxWebWorkers').textContent = stats.maxWebWorkers; document.getElementById('numWebWorkers').textContent = stats.numWebWorkers; document.getElementById('numQueuedTasks').textContent = stats.numTasksQueued; document.getElementById('numTasksExecuting').textContent = stats.numTasksExecuting; document.getElementById('totalTasksExecuted').textContent = stats.numTasksCompleted; document.getElementById('totalTaskExecutionTime').textContent = stats.totalTaskTimeInMS; document.getElementById('totalTaskDelayTime').textContent = stats.totalTimeDelayedInMS; } var sleepTaskLoaded = false; function startWebWorker() { // dyanmically load the sleep task if(!sleepTaskLoaded) { sleepTaskLoaded = true; // TODO: This URL probably won't work on hosted site cornerstoneWADOImageLoader.webWorkerManager.loadWebWorkerTask( `${window.location.protocol}//${window.location.host}/examples/customWebWorkerTask/sleepTask.js`,{ 'sleepTask' : { sleepTime: 3000 } } ); } const task = cornerstoneWADOImageLoader.webWorkerManager.addTask('sleepT
```

--------------------------------

### Access DICOM Metadata with WADO-URI Provider

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Demonstrates how to load a DICOM image using WADO-URI and access various metadata modules through cornerstone.metaData.get(). The WADO-URI metadata provider is registered automatically.

```javascript
// WADO-URI metadata provider is registered automatically
// Access metadata using cornerstone.metaData.get()

cornerstone.loadAndCacheImage('wadouri:https://example.com/dicom/CT0001.dcm')
  .then(function(image) {
    const imageId = image.imageId;

    // Get various metadata modules
    const imagePlaneModule = cornerstone.metaData.get('imagePlaneModule', imageId);
    console.log('Image Plane:', imagePlaneModule);
    // { rowPixelSpacing, columnPixelSpacing, imagePositionPatient, imageOrientationPatient, ... }

    const imagePixelModule = cornerstone.metaData.get('imagePixelModule', imageId);
    console.log('Image Pixel:', imagePixelModule);
    // { rows, columns, bitsAllocated, bitsStored, highBit, pixelRepresentation, ... }

    const modalityLutModule = cornerstone.metaData.get('modalityLutModule', imageId);
    console.log('Modality LUT:', modalityLutModule);
    // { rescaleIntercept, rescaleSlope, rescaleType, modalityLUTSequence }

    const voiLutModule = cornerstone.metaData.get('voiLutModule', imageId);
    console.log('VOI LUT:', voiLutModule);
    // { windowCenter, windowWidth, voiLUTSequence }

    const sopCommonModule = cornerstone.metaData.get('sopCommonModule', imageId);
    console.log('SOP Common:', sopCommonModule);
    // { sopClassUID, sopInstanceUID }

    const generalStudyModule = cornerstone.metaData.get('generalStudyModule', imageId);
    console.log('General Study:', generalStudyModule);
    // { studyDate, studyTime, studyDescription, ... }

    const generalSeriesModule = cornerstone.metaData.get('generalSeriesModule', imageId);
    console.log('General Series:', generalSeriesModule);
    // { modality, seriesDescription, seriesNumber, ... }

    const patientModule = cornerstone.metaData.get('patientModule', imageId);
    console.log('Patient:', patientModule);
    // { patientName, patientId, patientBirthDate, patientSex }

    const overlayPlaneModule = cornerstone.metaData.get('overlayPlaneModule', imageId);
    console.log('Overlay Plane:', overlayPlaneModule);
    // { overlays: [{ rows, columns, x, y, pixelData, ... }]
  });

```

--------------------------------

### Event Listener for Image Button Clicks

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

This code iterates through elements with the class 'imgbtn' and attaches a click event listener to each. When clicked, it extracts the image name from the button's text content and calls `downloadAndView` with a constructed URL pointing to an image on GitHub.

```javascript
const imageButtons = document.getElementsByClassName('imgbtn');
for(let i = 0; i < imageButtons.length; i++){
  const el = imageButtons[i];
  el.addEventListener('click', function(e) {
    const img = e.target.innerText;
    downloadAndView('https://raw.githubusercontent.com/cornerstonejs/cornerstoneWADOImageLoader/master/testImages/' + img);
  });
}
```

--------------------------------

### Initialize Drag and Drop Listeners

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/dicomfile/index.html

Sets up event listeners for 'dragover' and 'drop' events on the specified HTML element. This enables the drag-and-drop functionality for selecting DICOM files.

```javascript
const dropZone = document.getElementById('dicomImage');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
```

--------------------------------

### Download and View DICOM Image

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadouri/index.html

This function handles downloading a DICOM image from a given URL and then displaying it using cornerstone. It prepends 'wadouri:' to the URL to ensure the correct image loader is used. It also calls `loadAndViewImage` to render the image.

```javascript
function downloadAndView(downloadUrl) {
  let url = downloadUrl || document.getElementById('wadoURL').value;
  // prefix the url with wadouri: so cornerstone can find the image loader
  url = "wadouri:" + url;
  // image enable the dicomImage element and activate a few tools
  loadAndViewImage(url);
}
```

--------------------------------

### Initialize Web Worker Manager (Advanced Configuration)

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/docs/WebWorkers.md

This advanced configuration initializes the web worker manager with custom task paths and specific task configurations. It allows for pre-loading decoders and setting custom parameters for tasks like 'sleepTask'.

```javascript
var config = {
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
  webWorkerTaskPaths: [
    '../examples/customWebWorkerTask/sleepTask.js',
    '../examples/customWebWorkerTask/sharpenTask.js',
  ],
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false,
    },
    sleepTask: {
      sleepTime: 3000,
    },
  },
};
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
```

--------------------------------

### Handle Image Load Progress

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/examples/wadourimultiframe/index.html

Listens for the 'cornerstoneimageloadprogress' event and updates a DOM element to display the current loading progress percentage.

```javascript
cornerstone.events.addEventListener('cornerstoneimageloadprogress', function(event) {
    const eventData = event.detail;
    const loadProgress = document.getElementById('loadProgress');
    loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`;
});
```

--------------------------------

### Load Image with WADO-RS (DICOMWeb)

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Load images from DICOMWeb servers using the wadors scheme. Metadata must be fetched and added to the `metaDataManager` before loading the image frames. The frame URL is used to construct the `imageId`.

```javascript
// First, fetch the metadata from the DICOMWeb server
const studyInstanceUID = '1.2.3.4.5.6.7.8.9';
const seriesInstanceUID = '1.2.3.4.5.6.7.8.9.1';
const sopInstanceUID = '1.2.3.4.5.6.7.8.9.1.1';

const metadataUrl = `https://dicomweb.example.com/studies/${studyInstanceUID}/series/${seriesInstanceUID}/instances/${sopInstanceUID}/metadata`;

fetch(metadataUrl, {
  headers: { 'Accept': 'application/json' }
})
.then(response => response.json())
.then(metadataArray => {
  const metadata = metadataArray[0];

  // Construct the frame URL
  const frameUrl = `https://dicomweb.example.com/studies/${studyInstanceUID}/series/${seriesInstanceUID}/instances/${sopInstanceUID}/frames/1`;

  // Create the imageId with wadors scheme
  const imageId = 'wadors:' + frameUrl;

  // Add metadata to the metadata manager
  cornerstoneWADOImageLoader.wadors.metaDataManager.add(imageId, metadata);

  // Load and display the image
  const element = document.getElementById('dicomImage');
  cornerstone.enable(element);

  return cornerstone.loadImage(imageId);
})
.then(function(image) {
  const element = document.getElementById('dicomImage');
  const viewport = cornerstone.getDefaultViewportForImage(element, image);
  cornerstone.displayImage(element, image, viewport);

  console.log('WADO-RS image loaded successfully');
  console.log('Load time:', image.loadTimeInMS, 'ms');
})
.catch(function(error) {
  console.error('Error loading WADO-RS image:', error);
});
```

--------------------------------

### Define Supported Transfer Syntaxes

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Reference objects for uncompressed and compressed DICOM transfer syntaxes, along with supported photometric interpretations for image decoding.

```javascript
// Uncompressed transfer syntaxes (no codec required)
const uncompressedSyntaxes = {
  '1.2.840.10008.1.2': 'Implicit VR Little Endian',
  '1.2.840.10008.1.2.1': 'Explicit VR Little Endian',
  '1.2.840.10008.1.2.2': 'Explicit VR Big Endian',
};

// Compressed transfer syntaxes (require codecs)
const compressedSyntaxes = {
  '1.2.840.10008.1.2.5': 'RLE Lossless',
  '1.2.840.10008.1.2.4.50': 'JPEG Baseline (8 bit)',
  '1.2.840.10008.1.2.4.51': 'JPEG Baseline (12 bit)',
  '1.2.840.10008.1.2.4.57': 'JPEG Lossless (Process 14)',
  '1.2.840.10008.1.2.4.70': 'JPEG Lossless (Process 14 SV1)',
  '1.2.840.10008.1.2.4.80': 'JPEG-LS Lossless',
  '1.2.840.10008.1.2.4.81': 'JPEG-LS Lossy',
  '1.2.840.10008.1.2.4.90': 'JPEG 2000 Lossless',
  '1.2.840.10008.1.2.4.91': 'JPEG 2000 Lossy',
  '1.2.840.10008.1.2.1.99': 'Deflate',
  '3.2.840.10008.1.2.4.96': 'HTJ2K (experimental)',
};

// Supported photometric interpretations
const photometricInterpretations = [
  'MONOCHROME1',
  'MONOCHROME2',
  'RGB',
  'PALETTE COLOR',
  'YBR_FULL',
  'YBR_FULL_422',
  'YBR_RCT',
  'YBR_ICT',
];
```

--------------------------------

### Load Local DICOM Files

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Handles user file input, adds the file to the file manager, and loads/displays the DICOM image. Includes cleanup for removing files from the manager.

```javascript
// Handle file input from user
const fileInput = document.getElementById('dicomFileInput');

fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];

  // Add file to file manager and get imageId
  const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);

  // Load and display the image
  const element = document.getElementById('dicomImage');
  cornerstone.enable(element);

  cornerstone.loadAndCacheImage(imageId).then(function(image) {
    const viewport = cornerstone.getDefaultViewportForImage(element, image);
    cornerstone.displayImage(element, image, viewport);

    console.log('Local file loaded:', file.name);
    console.log('Image dimensions:', image.width, 'x', image.height);
  }).catch(function(error) {
    console.error('Error loading file:', error);
  });
});

// Cleanup: Remove file from manager when no longer needed
function cleanupFile(imageId) {
  // Extract index from imageId (format: dicomfile:0, dicomfile:1, etc.)
  const index = parseInt(imageId.split(':')[1]);
  cornerstoneWADOImageLoader.wadouri.fileManager.remove(index);
}

// Purge all files from manager
cornerstoneWADOImageLoader.wadouri.fileManager.purge();
```

--------------------------------

### Load Specific Frame from Multiframe DICOM with WADO-URI

Source: https://context7.com/cornerstonejs/cornerstonewadoimageloader/llms.txt

Load specific frames from multiframe DICOM instances by appending a frame parameter to the URL. Use `cornerstone.loadImage` for single frame loading or `cornerstone.loadAndCacheImage` in a loop to load all frames.

```javascript
// Load a specific frame from a multiframe DICOM
// Format: wadouri:<url>?frame=<frame-number>
const imageId = 'wadouri:https://example.com/dicom/multiframe.dcm?frame=5';

cornerstone.loadImage(imageId).then(function(image) {
  const element = document.getElementById('dicomImage');
  cornerstone.displayImage(element, image);

  // Get total number of frames from metadata
  const numberOfFrames = image.data.string('x00280008');
  console.log('Total frames:', numberOfFrames);
}).catch(function(error) {
  console.error('Error loading frame:', error);
});

// Load all frames programmatically
async function loadAllFrames(baseUrl, numberOfFrames) {
  const images = [];
  for (let frame = 0; frame < numberOfFrames; frame++) {
    const imageId = `wadouri:${baseUrl}?frame=${frame}`;
    const image = await cornerstone.loadAndCacheImage(imageId);
    images.push(image);
  }
  return images;
}
```

--------------------------------

### Configure External Dependencies

Source: https://github.com/cornerstonejs/cornerstonewadoimageloader/blob/master/changelog.md

Assign the dicomParser dependency to the loader's external object when using module-based packaging systems.

```javascript
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
```