Annotating Image in Web Document Viewer

RasterEdge ASP.NET Web Document Viewer for .NET is a mature and reliable library SDK which incorporates the latest HTML5 technology to provide the best viewer for viewing and annotating your local images and documents with a variety of annotation objects. Moreover, it provides perfect compatibility with most of the popularly used web browsers to ensure the ease of use.

Related .net document control helps:
asp.net sharepoint document viewer control: ASP.NET SharePoint Document Viewer: view, annotate, redact documents in SharePoint
asp.net edit pdf page control: ASP.NET PDF Pages Edit Control: add, remove, sort, replace PDF pages online using C#
asp.net view text file in browser: ASP.NET Text file viewer in MVC, WebForms: Open, view, annotate, convert txt files in C# ASP.NET
asp.net pdf editor component: EdgePDF: ASP.NET PDF Editor Web Control: Online view, annotate, redact, edit, process, convert PDF documents
asp.net dicom library: ASP.NET Dicom Document Viewer Control: view, annotate dicom imaging files online in ASP.NET
asp.net pdf document viewer c#: ASP.NET PDF Document Viewer in C#: open, display, view, annotate, redact Adobe PDF files online in ASP.NET MVC & WebForm...
asp.net view powerpoint: ASP.NET PowerPoint Document Viewer Control (MVC & WebForms): view ppt, pptx files online in C# using ASP.NET

In addition, this image and document web viewing control is based on JavaScript so it can be created the client side and it can communicate directly with a WebHandler on the service side. Listed below are some functions for annotating and redacting images & documents in HTML Document Image Viewer:

Create text annotation which can be edited and customized
Add freehand annotations with user-defined path using this ASP.NET Web Document Viewer
Support annotation burning function so the inserted annotation can stay with the document perpetually
Redact sensitive information with the help of this .NET web viewer for images and docs
Easy to change annotation font style, size, color and other properties
Able to integrate REWebViewer control into any ASP.NET web application completely
Also allow you to customize the web viewer toolbar for annotation functions
Support commonly used web browsers such as Internet Explorer 7, Google Chrome, Mozilla Firefox and Safari
Capable of adding annotations to various image formats and file types like multi-page TIFF and PDF

itextsharp edit existing pdf c#, create pdf document in asp.net c#, c# make thumbnail of pdf, c# itextsharp convert text file to pdf, convert pdf to html c# online, vb.net pdf to image, c# pdf add background.

This page provides detailed information for creating and adding annotation on images & documents in RasterEdge Web Document Viewer. Before you add annotations in Web Document Viewer, make sure that you have integrate RasterEdge .NET Web Viewer Control to your ASP.NET document viewing project. If you want to annotate image and document in WinForms, C#.NET applications or VB.NET applications, please go to Annotate Images in WinForms, Create Annotation for C#.NET and Image Annotation in VB.NET.

Image Annotation with Web Document Viewer

Draw Annotation

draw_annotation(annotationType): This API can allow you to bind a certain annotation function to a button to draw annotation of a specified type on your page. Right now, a large number of annotation objects are supported, including text, line, freehand, rectangle, filled rectangle, polygon, polygon lines, highlight, ellipse, rubber stamp, etc.

Developers only need to call a single method for each kind of annotation type to one button in your toolbar so you can create a web document viewer with customized annotation support!

In the downloaded package, there are demo projects for adding annotation functionality to your web viewer by binding specific API to corresponding button. Please feel free to download RasterEdge.DocImageSDK6.0 trial and try.

Burn Annotation

burnAnnotation: This API can allow you to bind annotation burning function to a button so you can click it to burn all annotations to your images or documents on the viewer. And they will stay there permanently.

Delete Annotation

deleteAnnotation: If you have excessive or unsatisfactory annotations, you can delete them by clicking a button which is bound with this API (for annotation deleting). Please note that once an annotation is deleted, you cannot recover it later.

Customize Annotation for Viewer

Once you unzip the downloaded free trial package, you will find that we have provided a complete demo for web document viewer in it for your reference. Furthermore, you can customize the annotation style of your web viewer with the following code (Javascript and HTML) in the head of Default.aspx.

<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">
//the patameters defined in aspx.cs are also needed in javascript
_serverUrl = "<%=ServerUrl%>";
_docWidth = "<%=DocWidth%>" - 17;
_docHeight = "<%=DocHeight%>";
_thumbWidth = "<%=ThumbWidth%>";
_thumbHeight = "<%=ThumbHeight%>";
_rnd = "<%=SessionId%>";
_pageSizeType = "<%=PageSizeType%>"
//define annotation style
TextAnnoStyle = new AnnoStyle({FillColor: "White", ShowedText: "double click to edit",
TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle :"Italic"});
FreehandAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 3.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: "Stamp annotation can show text here", TextColor: "Black", TextFont:
"Arial", TextSize: 12, TextStyle: "Italic"});
PolygonLinesAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 3.0});
PolygonAnnoStyle = new AnnoStyle({OutLineColor: "OrangeRed", OutLineWidth: 3.0, FillColor:
"OrangeRed"});
LineAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 3.0});
</script>

In addition to annotation type customization in ASP.NET web document viewer, you may also customize file operation online, like file opening & saving.