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. vb.net pdf api, itext add text to existing pdf c#, c# code to save excel file as pdf, vb.net itextsharp add image to pdf, how to convert pdf to jpg in c# windows application, itextsharp remove text from pdf c#. 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:
mvc document viewer: ASP.NET MVC Document Viewer: view, annotate, redact files on ASP.NET MVC web projects
asp.net excel view: ASP.NET Excel Viewer in C# Control (MVC & WebForms): view Office Excel document in web browser.
asp.net pdf document viewer: ASP.NET PDF Document Viewer in C#: open, display, view, annotate, redact Adobe PDF files online in ASP.NET MVC & WebForm...
asp.net sharepoint document viewer free: ASP.NET SharePoint Document Viewer: view, annotate, redact documents in SharePoint
asp.net office document viewer: ASP.NET Office Word Document Viewer: view Word doc files online using C# in ASP.NET MVC web applications
asp.net pdf editor control: EdgePDF: ASP.NET PDF Editor Web Control: Online view, annotate, redact, edit, process, convert PDF documents
asp.net display tiff images: ASP.NET Tiff Viewer: view, annotate multipage Tiff images in ASP.NET MVC, WebForms using C# Control


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. vb.net pdf reader, c# extract pdf page as image, c# remove text from pdf, vb.net pdf to word converter, export vb.net form to pdf, convert pdf to image vb.net free, vb.net change pdf metadata.


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;



asp.net pdf preview, how to write pdf file in asp.net c#, asp.net tiff viewer control, pdf viewer asp.net control open source, asp.net view image, asp.net itextsharp add image to pdf, asp.net core mvc view pdf.




<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.