ScanView (Imperial)

For my final project for my MSc in Computer Science at Imperial College, I implemented a browser-based medical image viewer called ScanView. It’s designed for viewing medical image data in .nii format, as acquired from MRI, CT and other scanning devices. It’s based on the XTK Library. Some of its features are outlined in the diagrams below.

Check it out here - have a look at the sample data section to download some dummy data. My final project report can be found here.


  • BackboneJS
  • XTK JS library
  • HTML5 Canvas and WebGL


  • Display Layer Management
    • Creation/Deletion of Display Layers
    • Loading Medical Image Data File per Display Layer
  • Loading of NII Volume Files (one per Display Layer)
  • Changing of Brightness
  • Changing Image Threshold
  • Changing indices of NII Volume File
  • Viewing of NII Volume File through 4 bespoke Camera Views (X, Y, Z and 3D)
  • Custom Layouts of the 4 different Camera Views
  • Navigation in Camera Views
    • Pan (middle mouse click and drag)
    • Zoom (right mouse click and drag, scroll in 3D Camera View)
    • Rotate in 3D Camera View (left mouse click and drag)
    • Traverse in 2D Camera View (left mouse click and drag)
    • Refocus the cameras by pressing 'F'
  • Two (A and B) buffers to hold different Display Layers
  • (Press 1 and 2 keys to toggle when hovering over Camera
  • View Panel)
  • Buffer Opacity and Buffer Swiping to compare the two
  • Display Layers (Hold Ctrl key and drag mouse across Camera
  • View Panel)
  • Changing the color lookup table for a Display Layer, currently 3 supported Lookups (None, ID's and JET)
  • Toggle for Volumetric Rendering of the Data in 3D Camera View
  • Interactive Annotation Management
    • Creation/Deletion of Annotation(s)
    • Support for multiple Annotations
    • Customisation of Label, Color and Position of Annotation
    • Saving out of Annotations as JSON file (via file download)
    • Loading and Importing of Annotation JSON files
    • Setting visibility of Annotations
  • Labelmap Management
    • Loading of Labelmaps
    • Changing opacity of Labelmap
    • Changing color lookup of Labelmap
  • Animation of stepping through each slice