How to create an Angular application with Cornerstone to open a DICOM

In this tutorial, you will learn how to create an Angular application with Cornerstone to open a DICOM file. Cornerstone is an open source library that provides an API for reading and writing DICOM files.

What is Cornerstone?

Cornerstone is a JavaScript library that facilitates the development of applications for working with medical images in the DICOM format. It provides a set of tools and utilities to handle image loading, manipulation, and rendering, making it easier for developers to build robust and feature-rich medical imaging applications.

Why use Cornerstone with Angular?

Integrating Cornerstone with Angular allows developers to harness the power of Angular's component-based architecture while leveraging Cornerstone's capabilities for working with DICOM files. This combination provides a solid foundation for creating modern and interactive medical imaging applications.

Requirements

To complete this tutorial, you will need the following:

• A code editor, such as Visual Studio Code or Atom

• Angular CLI

• Cornerstone

Set up

Generate the app

Generate a new Angular app and add Cornerstone.js

Use Angular CLI to generate a new Angular App.

Run ng new cornerstone-app in the command line, replacing cornerstone-app with the name of the app.

Add Cornerstone.js

To integrate Cornerstone into your Angular application, follow these steps to include the necessary scripts in the index.html file:

<script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>   

<script src="https://unpkg.com/dicom-parser@1.8.21/dist/dicomParser.js"></script>

<script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.js"></script>

<script src="https://unpkg.com/cornerstone-wado-image-loader@4.13.2/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>

Understanding the Added Scripts

In the previous section, we added several scripts to our Angular application to incorporate the Cornerstone library. Let's take a moment to understand the purpose of each added script:

1. cornerstone.js
   This script is the core of the Cornerstone library. It provides the fundamental functionality for working with medical images in the DICOM format. It includes tools for image loading, rendering, and manipulation. Make sure to use the latest version available for optimal features and bug fixes.

2. dicomParser.js
   The dicomParser library is responsible for parsing DICOM files. It provides methods to extract information from DICOM data, enabling Cornerstone to interpret and display medical images correctly.

3. cornerstoneMath.js
   This script includes mathematical utilities required for image manipulation and processing within the Cornerstone library. It ensures accurate rendering and transformations of medical images.

4. cornerstoneWADOImageLoader.js
   The cornerstoneWADOImageLoader is an extension to Cornerstone that allows loading medical images using the WADO (Web Access to DICOM Objects) protocol. This script enhances Cornerstone's capabilities to retrieve and display DICOM images from a server.

The complete code for this tutorial can be found in the following GitHub repository:

https://github.com/tonitomystery/cornerstone-angular

Feel free to explore additional features offered by Cornerstone and customize your DICOM viewer further. If you encountered any issues or have questions, don't hesitate to refer to the provided GitHub repository or seek assistance in the developer community.

Thank you for following this tutorial! Happy coding!