WebImageViewer Client Object
The LEADTOOLS WebImageViewer control includes a client-side Javascript class to update the server control without posting the entire page back to the server. Most of the WebImageViewer server properties can be accessed through the Javascript class. You can access the LEADTOOLS WebImageViewer control on the client-side by using the ASP.NET generated ClientID on the WebForm.
Client Naming
The client-side version of the control uses the same naming convention as the server control version for easier coding. All LEADTOOLS public class definitions in the WebImageViewer.js and Utilities.js files contain the prefix "ltwf" to avoid conflicts with any other components on the page.
Client Public Methods/Properties
All server side object properties can be accessed on the client by using two methods: "GetServerPropertyName", and "SetServerPropertyName", where “ServerPropertyName” is replaced with the name of the property to be accessed or set.
The following table lists the Server properties and the mapped client methods:
| Property\Method Name(Server) | Method Name(Client) | Description | Input Type |
|---|---|---|---|
| ApplyCommand | ApplyCommand(cmd: XXXCommand); | Applies a client image processing command to the current image to process it. | cmd: any client image processing command to apply to the image. |
| N/A | ID | Gets the web control identifier generated by ASP.NET. | - |
| BackColor |
getBackColor():string setBackColor(value: |
Gets or sets the background color of the control. |
|
| BorderColor |
getBorderColor():string setBorderColor(value: |
Gets or sets the border color of the control. |
|
| BorderStyle |
getBorderStyle():string setBorderStyle(value: |
Gets or sets the border style of the control. |
|
| BorderWidth |
getBorderWidth():int setBorderWidth(value: |
Gets or sets the border width of the web control. |
|
| DropShadowColor |
getDropShadowColor():string setDropShadowColor(value: |
Gets or sets the drop shadow color. |
|
| DropShadowSize |
getDropShadowSize():int setDropShadowSize(value: |
Gets or sets the shadow size of the frame that you add to image. |
|
| Width |
getWidth():int setWidth(value: |
Gets or sets the width of the web control in pixels. |
|
| Height |
getHeight():int setHeight(value: |
Gets or sets the height of the web control in pixels. |
|
| HorizontalAlignMode |
getHorizontalAlignMode():ImageViewerAlignMode setHorizontalAlignMode(value:ImageViewerAlignMode) |
Gets or sets the horizontal alignment used when displaying the image. |
ImageViewerAlignMode representing the horizontal alignment used when displaying the image. (0-2), 0:Near, 1:Center, 2:Far |
GetHorizontalRealScaleFactor(): |
Gets the real horizontal scale factor used to display the image. |
- | |
| ImageBorderSize |
getImageBorderSize():int setImageBorderSize(value: |
Gets or sets the number of pixels to leave as buffer between the control and the image. |
|
| ImageFrameColor |
getImageFrameColor():string setImageFrameColor(value: |
Gets or sets the color of the image frame. |
|
| ImageFrameSize |
getImageFrameSize():int setImageFrameSize(value: |
Gets or sets the size of the frame to be added to the image. |
|
| ImageInfo |
getImageInfo():ltwfImageInfo Client Class |
Gets information about the image currently loaded in the control. |
- |
| ImageUrl |
getImageUrl():string |
Gets the URL of the image currently loaded. |
- |
| InteractiveZoomPercent |
getInteractiveZoomPercent():int setInteractiveZoomPercent(value: |
Gets or sets the percentage that the property will change when one of the zoom interactive modes used. |
|
| MaxScrollPosition |
getMaxScrollPosition():ltwfPoint Client Class |
Gets the maximum scroll position the image can scroll to. |
- |
| MouseInteractiveMode |
getMouseInteractiveMode():ltwfMouseInteractiveMode Client Class |
Gets the behavior of the left/right mouse button when interacting with the viewer. |
- |
| OpenImageUrl | OpenImageUrl(imageUrl: |
Opens the image from an URL or a virtual path and displays it | imageUrl: The URL or virtual directory of the image to load pageIndex: 0-based index of the page to open |
getResourcesPath(): |
Gets the virtual path to where resources(icons, scripts) are located. |
- | |
getScaleFactor(): setScaleFactor(value: |
Gets or sets the zoom factor used to display the image. |
1 means displaying the image in original width/height (1:1). |
|
getScrollBarVisible(): |
Gets the visibility of the scrollbars. |
- | |
getScrollPosition():ltwfPoint Client Class setScrollPosition(value:ltwfPoint Client Class) |
Gets or sets the scroll bar position. |
ltwfPoint Client Class representing the scroll bar position |
|
getSizeMode():ImageViewerSizeMode setSizeMode(value:ImageViewerSizeMode) |
Gets or sets how the control displays the image and the automatic adjustments of the display rectangles. |
||
getTileSize():ltwfSize Client Class setTileSize(value:ltwfSize Client Class) |
Gets or sets the size (width/height) in pixels of the tiles that the image is divided. |
ltwfSize Client Class representing the size (width/height) in pixels of the tiles that the image is divided. |
|
| Tooltip |
getTooltip():string setTooltip(value: |
Gets the text displayed when the mouse hovers over the web control. |
|
| UseDpi |
getUseDpi():bool setUseDpi(value: |
Gets or sets whether the control uses the image's DPI (Dot Per Inch) to calculate the physical resolution for the image or not. |
true to use the image's DPI (Dot Per Inch) to calculate the physical resolution; false to ignore it. |
getVerticalAlignMode():ImageViewerAlignMode setVerticalAlignMode(value:ImageViewerAlignMode) |
Gets or sets the vertical alignment to display the image. |
ImageViewerAlignMode (0-2), 0:Near, 1:Center, 2:Far. |
|
getVerticalRealScaleFactor(): |
Gets the real vertical scale factor used to display the image. |
- | |
| Visible |
getVisible():bool setVisible(value: |
Gets or sets whether show/hide the control on the web page. |
true to show the control; false to hide it. |
Client Public Events
All public client-side Leadtools events can be overridden with your own function. The following example displays a Javascript alert whenever the ImageUrl property is changed on the WebImageViewer client object.
WebImageViewer1.ScaleFactorChanged = myScaleFactorChanged;
function myScaleFactorChanged()
{
alert("ScaleFactor Changed!");
}
The following table lists the Client side events that can be overridden:
| Event Name(Server) | Event Name(Client) | Raised when |
|---|---|---|
N/A |
BackColorChanged |
BackColor property is changed. |
N/A |
BorderColorChanged |
BorderColor property is changed. |
N/A |
BorderStyleChanged |
BorderStyle property is changed. |
N/A |
BorderWidthChanged |
BorderWidth property is changed. |
DropShadowColorChanged |
DropShadowColor property is changed. |
|
DropShadowSizeChanged |
DropShadowSize property is changed. |
|
HorizontalAlignModeChanged |
HorizontalAlignMode property is changed. |
|
ImageChanged |
New image is loaded in the web control. |
|
ImageDataChanged |
The current image data is changed by applying an image processing command. |
|
ImageBorderSizeChanged |
ImageBorderSize property is changed. |
|
ImageFrameColorChanged |
ImageFrameColor property is changed. |
|
ImageFrameSizeChanged |
ImageFrameSize property is changed. |
|
InteractiveZoomPercentChanged |
InteractiveZoomPercent property is changed. |
|
MouseInteractiveModeChanged |
MouseInteractiveMode property is changed. |
|
ScaleFactorChanged |
ScaleFactor property is changed. |
|
ScrollPositionChanged |
ScrollPosition property is changed. |
|
SizeModeChanged |
SizeMode property is changed. |
|
TileSizeChanged |
TileSize property is changed. |
|
UseDpiChanged |
UseDpi property is changed. |
|
VerticalAlignModeChanged |
VerticalAlignMode property is changed. |
|
N/A |
VisibileChanged |
Visibile property is changed. |