Annotating Image in Web Document Viewer

Annotate, Redact Images and Documents in AJAX Zero-Footprint Document Viewer

.NET Imaging Viewer
SDK & Add-Ons
Image Controls for:
Home > .NET Image Viewer > Demos > ASP.NET
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.
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:
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.
More Tutorials!
Find more user guides for AJAX Zero-Footprint Document Viewer!
Want to install Imaging SDK in WinForms applications, please go to Use Imaging SDK in WinForms.

RasterEdge.com is professional provider of document, content and imaging solutions, available for ASP.NET AJAX, Silverlight, Windows Forms as well as WPF. We are dedicated to provide powerful & profession imaging controls, PDF document, image to pdf files and components for capturing, viewing, processing, converting, compressing and stroing images, documents and more.

©2000-2016 Raster Edge.com