Guide for VB.NET
Annotation
Core Document Formats
Additional Features

VB.NET Imaging - Annotate Web Image Using VB.NET

Annotation Features and Customizable Properties in VB Web Image Viewer

VB.NET
Home > .NET Imaging SDK > VB.NET > Annotate Web Image
To get started with DocImage SDK for .NET, you are supposed to read VB.NET Imaging: Get Started first!

What RasterEdge web image viewer SDK for VB.NET can do for you? One of the best features of this web image viewing control is annotating web images and document pages. With this web image annotating function, users can arbitrarily add, burn, and delete annotations to/from web images and documents. It is a mature and professional web image annotating SDK, and VB.NET users can write & modify notes and comments on web images and pages to share with friends paperlessly. It is really an excellent online image annotating and collaborative tool.
Do you want to know how to annotate web images in C# project? Go directly to C# project web viewer image annotation page for more details.
VB.NET Web Image Viewer - Annotating Types
After creating a web image viewer in VB project, you will be able to use the annotating features provided by our web image viewing SDK to draw and add annotations to your web images and document pages. Some of them are lines, shapes and marks. All in all, the following several annotation types can be used for your web imaging application in VB.NET.
  • Text: Whenever you want to add, redact, modify text, this VB text annotation is just the right choice for you.
  • Freehand: With web image freehand annotating support, you can draw any shapes on images and documents in web image viewer built in VB.NET project.
  • Line: Line annotation can be added on web images easily in VB.NET for emphasis like underline.
  • Polygon Line: Polygon line annotation is also frequently used by VB users.
  • Filled Rectangle: Users always draw a black border filled rectangle with VB.NET web image viewer to hide or cover contents on images and documents.
  • Rectangle: Users are freely to define the size and position of the transparent background rectangle annotation with a few lines of JavaScript.
  • Highlight: A yellow transparent background annotation is often used by VB.NET users to stress text on images or files within web document image viewer add-on.
  • Ellipse: Users can place text inside the ellipse-shaped annotation with VB.NET web document image viewing tool.
  • Polygon: it is easy to make polygon annotation with our web image viewer in Visual Basic .NET web project.
  • Rubber Stamp: This annotation type can be included on web viewer toolbar. You can directly draw and add a rubber stamp by dragging and dropping mouse on web image or document page.
  • Burn: All above text and graphics annotations can be permanently added onto images and documents with burning feature in VB.NET.
  • Delete: Able to delete the annotations mentioned above within web image viewer in VB.NET program.
Annotation Demo APIs Within VB.NET Web Image Viewer
RasterEdge mainly offers users with following three JavaScript APIs within web image viewer in VB.NET class. And users can simply set these sets of annotation APIs to easily and precisely draw, burn and delete any supportable annotation markup to your web image or document page.
  • draw_annotation(annotationType): VB.NET users can take this annotation adding API to draw any specified annotation object to web image.
  • burnAnnotationToImages: please adopt this annotation burning API to combine and merge the drawn annotation to web page/image within web image viewer.
  • DeleteAnnotation: if you have created an improper or a redundant image annotation, call this API to remove and delete it.
Customizable Annotation Properties in VB.NET Web Viewer
Our web-based image annotating control provides a growing types of image annotations. And the properties of supported annotation types can be customized in the following aspects with JavaScript.
  • Outline Color: Line color of freehand, rectangle, filed rectangle, rubber stamp, polygon lines, polygon, and line annotations can be set with a few lines of JavaScript codes.
  • Outline Width: Apart from setting annotation outline to various colors, VB users can also set the line width of the above mentioned annotation styles.
  • Fill Color: Background color is also adjustable in VB web project for image text, highlight, filled rectangle, rubber stamp, and polygon annotation parameters.
  • Showed Text: Text added by text and rubber stamp annotations can be set to be human-readable.
  • Text Color: The human-readable text color added by text and rubber stamp annotations is adjustable.
  • Text Font: The human-readable text font added by text and rubber stamp annotations is custom.
  • Text Size: The human-readable text size added by text and rubber stamp annotations can also be set with JavaScript code.
  • Text Style: Four text styles are available for human-readable text added by text and rubber stamp annotations in VB web image viewer library. They are regular, bold, italic and underline.

Demo Code on Customizing Annotation Parameters

Please copy following sample JavaScript and HTML codes to the head of Default.aspx. And you can change annotation parameters to customize the effect.
<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>
More Tutorial Related to VB Web Image Annotation
Find more Rasterdege .NET, VB.NET Image Web Viewer annotation and operation tutorials.


Recommend this to Google+