Rendering Medical Images using Blazor and fo-dicom

A few months ago, I was looking for the simplest way to render a DICOM file for the Web using .NET Core. By "the simplest way", I mean using the minimum lines of code.

Prerequisites

I used the following tools and libraries:

  • Visual Studio 2017 15.8.6
  • .NET Core SDK 2.1.402
  • Blazor 6.0.0
  • fo-dicom.Drawing 4.0.0

What is DICOM?

Digital Imaging and Communications in Medicine (DICOM) is the standard for the communication and management of medical imaging information and related data. DICOM is most commonly used for storing and transmitting medical images enabling the integration of medical imaging devices such as scanners, servers, workstations, printers, network hardware, and picture archiving and communication systems (PACS) from multiple manufacturers. It has been widely adopted by hospitals and is making inroads into smaller applications like dentists' and doctors' offices.

What is fo-dicom?

fo-dicom stands for Fellow Oak DICOM for .NET, .NET Core, Universal Windows, Android, iOS, Mono and Unity. fo-dicom is a modular framework. I used here fo-dicom.Drawing library which is a .NET Core library providing System.Drawing based image rendering and printing.

How to install and use fo-dicom.Drawing?

I choose Blazor (Server-side in ASP.NET Core) which is a project template for creating a Blazor application that runs server-side inside an ASP.NET Core application.

The easiest way to obtain fo-dicom binaries is from NuGet.

The test1 dicom file will be located in FoDicomBlazorDemo.Server project.

The index.cshtml Razor Page is modified like below:

@page "/"
@using Dicom.Imaging

<button onclick="@Show">Bitmap</button>

@functions{

    void Show()
    {
        ImageManager.SetImplementation(WinFormsImageManager.Instance);
        var image = new DicomImage(@"test1.dcm");
        image.RenderImage().AsClonedBitmap().Save(@"test1.bmp");
    }

}

When you click on the Bitmap button, the Dicom file will be converted to a Bitmap file at the server side. But until this moment, the medical image converted to a Bitmap is not visible for the end user. The easiest way to render the image is to drag and drop the Bitmap image file between button section and @functions then you need to use the Visual Studio light bulb to convert it to a "data:text/plain;based64".

Adding the second image is similar to the first one.

To see the result, you have to run the application. The images are located side by side.

Summary

In this blog post, I used fo-dicom.Drawing library to convert a couple of dicom files to Bitmap images and render them in Blazor Server-Side application.

Source Code Demo

For more details, you can check the source code in my FoDicomBlazorDemo repository.

Blazor dotnetcore aspnetcore WebAssembly DICOM