Medical DICOM Viewer 🏥

Table of Contents 📑

• Overview
• Tech Stack
• Demo Video
• Quick Start
• Project Structure
• Core Components
• Technical Implementation
• Development Challenges
• Acknowledgments

📋 Overview

A specialized web application for viewing and manipulating DICOM (Digital Imaging and Communications in Medicine) files, built with React, TypeScript, and Konva.js.

🛠️ Tech Stack

Vite + React

Cornerstone.js

Konva.js

🎬 Demo Video

DCV_Demo.mp4

🚀 Quick Start

Development Setup

# Clone repository
git clone https://github.com/falgun143/Dicom_Viewer.git

# Install dependencies
npm install

# Start development server
npm run dev

🐳 Docker Setup

# Build Docker image
docker build -t dicom_viewer .

# Run container
docker run -p 5173:5173 dicom_viewer

Create production build

npm run build

Serve production build

npm run start

🏗️ Project Structure

🧩 Core Components

1. Appbar

2. Homepage

• Main entry point
• User interface ins pired by Vzy.co

3. UploadButtonPage

4. ImageCanvas

• Konva.js integration
• Canvas stage management
• Cropping area implementation
• Measurement t ools

5. MetaDataPage

💡 Technical Implementation

DICOM Processing

• Utilizes cornerstone.js for DICOM parsing
• Implements dicom-parser and dicom-image-l oader
• Local storage integration for image persistence

Canvas Management

• Konva.js for interactive canvas elements
• Custom stage management for optimal performance
• Event handling for mouse/touch interactions

State Management

• React Context API for global state
• Custom hooks for DICOM operat ions
• Local storage integration for persistence

Image Processing Pipeline

1. Store base64 string in localStorage
2. Extract and validate image type
3. For standard images: direct base64 rendering
4. For DICOM:
   • Convert base64 to Blob
   • Process through cornerstone
   • Generate Image ID
   • Render using Konva.js

🔧 Development Challenges

1. DICOM Understanding

• Required research into DICOM format
• Studied existing viewers for inspiration
• Analyzed medical imaging requirements

2. Library Selection

• Initially attempted ohif/core
• TypeScript compatibility issues
• Switched to cornerstone.js for better integration

3. Image Persistence

• Implemented base64 storage solution
• Developed custom loading pipeline
• Handled different image format types

🙏 Acknowledgments

• Origin Medical team
• Cornerstone.js community
• Konva.js developers