C#: Online Guide
How To: Dicom SDK
Dicom HTML5 Viewer
  |  
Home ›› XDoc.Dicom ›› C# Dicom: Dicom HTML5 Viewer

C# DICOM - How to Create Web Viewer


Create Web Document Viewer to View, Annotate, Save & Print DICOM in C#.NET




C#.NET Create Web Viewer Overview



It's quiet easy and fast to create a web document viewer for DICOM document in C#.NET project. And in real deployment, you are also able to insert a web document viewer into your own web page for document viewing. On the whole, such a C#.NET document viewer empowers your to view, annotate, save, and print (convert) DICOM document.


Related .net document control helps:
view file asp.net: View multiple document formats in ASP.NET, MVC, Ajax, Azure using C# control
asp.net azure pdf editor using c#: ASP.NET Azure PDF Editor Control: view, edit, annotate, redact PDF files online
asp.net webforms pdf editor using c#: ASP.NET WebForms PDF Editor: create, view, edit, annotate, redact PDF file in ASP.NET WebForms application
c# asp.net dicom document viewer: ASP.NET Dicom Document Viewer Control: view, annotate dicom imaging files online in ASP.NET
c# asp.net image viewer: ASP.NET Image Document Viewer Control: view, annotate, redact, convert image files in html web browser
c# asp.net sharepoint document viewer: ASP.NET SharePoint Document Viewer: view, annotate, redact documents in SharePoint
c# asp.net webforms document viewer: ASP.NET WebForms application document viewer control: view, annotate, redact, convert files online in ASP.NET


This C# tutorial page will guide you to use .NET WebViewer DLL and some dependencies to create a fully functional DICOM document web viewer. And various functions can be customized on the C#.NET document viewer, like navigating, annotating, saving and printing. Now, let's firstly see what functions are provided by RasterEdge .NET Web Document Viewer Solution for DICOM image file, and then move on to detailed steps for creating web viewer.


Functions of .NET Web Document Viewer for DICOM:


Advanced web viewer solution with full integration with C#.NET DICOM imaging application


Easy to add web document viewer to your ASPX web page to view and edit DICOM image file


Quick to load DICOM image file into C#.NET web document viewer through url or upload button


High fidelity viewing of DICOM images with different compression scheme and color depth


Provide two ways to navigate through web DICOM document: thumbnail image and document outline


Support annotating on DICOM image file with 10+ shapes in C#.NET web application


Allow C#.NET users to save or print (convert) web DICOM file to TIFF or PDF file




Detailed C# Guide for Creating Web DICOM Viewer



This part will guide C#.NET users to set up a web page containing an embedded Web DICOM Document Viewer. (Web Document Viewer Online Demo)


Add reference to RasterEdge.Imaging.WebViewer.dll in your C#.NET DICOM document imaging project. Once you do this, dependencies will automatically be included in your C#.NET web project;


Copy the content of Web.config in the download package to your configuration file which is supposed to be Web.config;


Copy web document viewer resources from the download package to the root of your C#.NET DICOM document imaging project;


Add a new Web Form (Default.aspx) to your C#.NET web project and copy the following C#.NET code to the head of it. Note, C#.NET code below is used to create Web DICOM Document Viewer objects and initialize the viewer;




<link href="RasterEdge_Imaging_Files/RasterEdge.css" rel="stylesheet"type="text/css"/>
<script src="RasterEdge_Imaging_Files/RasterEdge.js" type="text/javascript"></script>
<script src="RasterEdge_Imaging_Files/CreateViewerToolBar.js" type="text/javascript"></script>
  <script type="text/javascript">
    _fid = "<%=fid %>";
    _viewer = new RasterEdgeViewer({
        _serverUrl: "/RasterEdge_Imaging_Files/WebHandler.ashx",
         //0 represent png, 1 represent svg
        _pdfViewer: 1,
        _wordViewer: 1,
        _excelViewer:1,

        //Set width and height of the webViewer(pixel)
        _viewerWidth: 1024,
        _viewerHeight: 730,
    });

//define annotation style
//annotation style
//Color:Hexadecimal color can be used
//Transparency:1 on behalf of saturated, 0 represents completely transparent
//TextStyle:italic/oblique/normal  
TextAnnoStyle = new AnnoStyle({FillColor: "White", ShowedText: "double click to edit", TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle :"normal"});
FreehandAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
HighlightAnnoStyle = new AnnoStyle({FillColor: "Yellow"});
RectangleAnnoStyle = new AnnoStyle({OutLineColor: "Black", OutLineWidth: 3.0});
FilledRectangleAnnoStyle = new AnnoStyle({OutLineColor: "Black", OutLineWidth: 3.0, FillColor: "Black", Transparency: 1});
EllipseAnnoStyle = new AnnoStyle({FillColor: "Orange"});
RubberStampAnnoStyle = new AnnoStyle({OutLineColor: "Tomato", OutLineWidth: 3.0, FillColor: "Red", ShowedText: "Good", TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle: "Italic"});
PolygonLinesAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
PolygonAnnoStyle = new AnnoStyle({OutLineColor: "OrangeRed", OutLineWidth: 3.0, FillColor: "OrangeRed"});
LineAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
ArrowAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0, FillColor: "Red",Transparency:0.8});

//Set whether the toolbar shows the corresponding icon(true or false)
//You can set the item including:_toolbar/_fileToolbar/_annoToolbar/_fullToolbar
//_uploadToolbar/_printToolbar/_saveToolbar/_convertToolbar
//_textToolbar/_freehandToolbar/_arrowToolbar/_lineToolbar/_polygonLinesToolbar/_filledRectangleToolbar/_rectangleToolbar/_highlightToolbar/_ellipseToolbar/_polygonToolbar/_rubberStampToolbar/_deleteToolbar
 </script>




Create DICOM document viewing area by copying the following HTML into your document's body.




<div class="re_container">
   <div class = "re_func_toolbar"></div>
    <div id="_tblImgs"class="re_content" style="width:100%">
        <div class="RE_WebViewer" id="REWebViewer1"></div>
    </div>
</div>




To use some functions in your Web DICOM Document Viewer, you may select some codes below to Default.aspx.cs file in your C#.NET web project. Note: Default.aspx.cs is a code behind for Default.aspx.




public string mode;
public string fid;
protected void Page_Load(object sender, EventArgs e)
{
       string command = Request.Form["RECommand"];
       if (command == null || command.Equals(""))
       {
WorkRegistry.Reset();
LoadFileFromUrl();
    }
        else if (command.Equals("OpenFile"))
    {
        LoadFileFromUpload();
    }
    else if (command.Equals("SaveFile"))
    {
        SaveFile();
    }
    }

public void LoadFileFromUrl()
    {
    string file = Request.QueryString["file"];
    if (file != null &&file != "")
    {
        file = file.Trim();
        string initFilePath = file;
string projectName = System.Web.HttpContext.Current.Request.PhysicalApplicationPath.Replace("\\", "/");
    string path = projectName + "/RasterEdge_Demo_Docs/" + initFilePath;
    if (File.Exists(path))
    {
        fid = REDocumentControl.GenerateId();
        string result = LoadFile("RasterEdge_Demo_Docs" + initFilePath, fid);
        if (result != "")
            this.RegisterStartupScript("", "<script>alert('" + result + "');</script>");
    }
    }
    }

public void LoadFileFromUpload()
    {
string uploadFile = Request.Form["uploadfile"];
string filename = "/RasterEdge_Cache/" + uploadFile;
fid = Request.Form["Fid"];
string result = LoadFile(filename, fid);
Response.Clear();
Response.Write(result);
Response.End();

//load document from stream
//REDocumentControl.LoadFile(Stream stream, fid);

//load document from array
//REDocumentControl.LoadFile(byte[] array, fid);
    }

public void SaveFile()
    {
string fileName = Request.Form["saveFileName"];
string fid = Request.Form["Fid"];
Response.Clear();
Response.Write(fileName);
Response.End();
    }

private string LoadFile(string filename,string fid)
    {
string result = "";
try
        {
REDocumentControl.LoadFile(filename, fid);
        }
catch (Exceptionex)
        {
result = ex.Message.ToString();
        }
return result;




Now, your Web DICOM Document Viewer is created in C#.NET project. If you want to customize the web viewer, please see details from developer guide in the download package.