Skip to content

Latest commit

 

History

History
173 lines (130 loc) · 3.71 KB

README.md

File metadata and controls

173 lines (130 loc) · 3.71 KB

Medical DICOM Viewer 🏥

Table of Contents 📑

📋 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

🎬 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

Project Structur e

🧩 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