How to create an Angular application with Cornerstone to open a DICOM
Tags: dicom, angular, cornerstonejs
Published: 2023-11-25 14:35:43

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!