Products | Support | Send comments on this topic. | Email a link to this topic. | Back to Introduction | Help Version 18.0.1.22
WebImageViewer JavaScript Client Class
Show in webframe
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 |
|---|---|---|---|
| WebImageViewer.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:String) |
Gets or sets the background color of the control. |
String representing the CSS background color. |
| BorderColor |
getBorderColor():string setBorderColor(value:String) |
Gets or sets the border color of the control. |
String representing the CSS border color. |
| BorderStyle |
getBorderStyle():string setBorderStyle(value:String) |
Gets or sets the border style of the control. |
String representing the CSS border style. |
| BorderWidth |
getBorderWidth():int setBorderWidth(value:Int) |
Gets or sets the border width of the web control. |
Int representing the border width of the web control. |
| WebImageViewer.DropShadowColor |
getDropShadowColor():string setDropShadowColor(value:String) |
Gets or sets the drop shadow color. |
String representing the CSS drop shadow color. |
| WebImageViewer.DropShadowSize |
getDropShadowSize():int setDropShadowSize(value:Int) |
Gets or sets the shadow size of the frame that you add to image. |
Int representing the shadow size. |
| Width |
getWidth():int setWidth(value:Int) |
Gets or sets the width of the web control in pixels. |
Int representing the width of the web control. |
| Height |
getHeight():int setHeight(value:Int) |
Gets or sets the height of the web control in pixels. |
Int representing the height of the web control. |
| WebImageViewer.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():Double |
Gets the real horizontal scale factor used to display the image. |
- | |
| WebImageViewer.ImageBorderSize |
getImageBorderSize():int setImageBorderSize(value:Int) |
Gets or sets the number of pixels to leave as buffer between the control and the image. |
Int represents the number of pixels to leave as buffer between the control and the image. |
| WebImageViewer.ImageFrameColor |
getImageFrameColor():string setImageFrameColor(value:String) |
Gets or sets the color of the image frame. |
String representing the CSS color of the image frame. |
| WebImageViewer.ImageFrameSize |
getImageFrameSize():int setImageFrameSize(value:Int) |
Gets or sets the size of the frame to be added to the image. |
Int representing the size of the frame. |
| WebImageViewer.ImageInfo |
getImageInfo():ltwfImageInfo |
Gets information about the image currently loaded in the control. |
- |
| WebImageViewer.ImageUrl |
getImageUrl():string |
Gets the URL of the image currently loaded. |
- |
| WebImageViewer.InteractiveZoomPercent |
getInteractiveZoomPercent():int setInteractiveZoomPercent(value:Int) |
Gets or sets the percentage that the Leadtools.Web.Controls.WebImageViewer.ScaleFactor property will change when one of the Leadtools.Web.Controls.ImageViewerMouseInteractiveMode zoom interactive modes used. |
Int representing the percentage that the Leadtools.Web.Controls.WebImageViewer.ScaleFactor property will change when one of the Leadtools.Web.Controls.ImageViewerMouseInteractiveMode zoom interactive modes used. |
| WebImageViewer.MaxScrollPosition |
getMaxScrollPosition():ltwfPoint |
Gets the maximum scroll position the image can scroll to. |
- |
| WebImageViewer.MouseInteractiveMode |
getMouseInteractiveMode():ltwfMouseInteractiveMode |
Gets the behavior of the left/right mouse button when interacting with the viewer. |
- |
| WebImageViewer.OpenImageUrl | OpenImageUrl(imageUrl: String, pageIndex: Int); | 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():String |
Gets the virtual path to where resources(icons, scripts) are located. |
- | |
|
getScaleFactor():Double setScaleFactor(value:Double) |
Gets or sets the zoom factor used to display the image. |
Double representing the zoom factor to be used in displaying the image 1 means displaying the image in original width/height (1:1). |
|
|
getScrollBarVisible():bool |
Gets the visibility of the scrollbars. |
- | |
|
getScrollPosition():ltwfPoint setScrollPosition(value:ltwfPoint) |
Gets or sets the scroll bar position. |
ltwfPoint 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. |
Int (0-4), 0:Normal, 1:Stretch, 2:FitAlways, 3:FitWidth, 4: Fit. |
|
|
getTileSize():ltwfSize setTileSize(value:ltwfSize) |
Gets or sets the size (width/height) in pixels of the tiles that the image is divided. |
ltwfSize representing the size (width/height) in pixels of the tiles that the image is divided. |
|
| Tooltip |
getTooltip():string setTooltip(value:String) |
Gets the text displayed when the mouse hovers over the web control. |
String representing the text displayed when the mouse hovers over the web control. |
| WebImageViewer.UseDpi |
getUseDpi():bool setUseDpi(value:bool) |
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():Double |
Gets the real vertical scale factor used to display the image. |
- | |
|
getInputProfile(): string setInputProfile(value: string) |
Gets or sets the url of the XML file that contains the codecs options to be used as load options. |
string url of the XML file that contains the codecs options to be used as load options. |
|
|
getOutputProfile(): string setOutputProfile(value: string) |
Gets or sets the url of the XML file that contains the options to be used as codecs save options for the image displayed by the WebImageViewer. |
string the url of the XML file that contains the options to be used as codecs save options for the image displayed by the WebImageViewer. |
|
| Visible |
getVisible():bool setVisible(value:bool) |
Gets or sets whether show/hide the control on the web page. |
String representing whether to show/hide the control. 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.
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 |
|---|---|---|---|
| WebImageViewer.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:String) |
Gets or sets the background color of the control. |
String representing the CSS background color. |
| BorderColor |
getBorderColor():string setBorderColor(value:String) |
Gets or sets the border color of the control. |
String representing the CSS border color. |
| BorderStyle |
getBorderStyle():string setBorderStyle(value:String) |
Gets or sets the border style of the control. |
String representing the CSS border style. |
| BorderWidth |
getBorderWidth():int setBorderWidth(value:Int) |
Gets or sets the border width of the web control. |
Int representing the border width of the web control. |
| WebImageViewer.DropShadowColor |
getDropShadowColor():string setDropShadowColor(value:String) |
Gets or sets the drop shadow color. |
String representing the CSS drop shadow color. |
| WebImageViewer.DropShadowSize |
getDropShadowSize():int setDropShadowSize(value:Int) |
Gets or sets the shadow size of the frame that you add to image. |
Int representing the shadow size. |
| Width |
getWidth():int setWidth(value:Int) |
Gets or sets the width of the web control in pixels. |
Int representing the width of the web control. |
| Height |
getHeight():int setHeight(value:Int) |
Gets or sets the height of the web control in pixels. |
Int representing the height of the web control. |
| WebImageViewer.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():Double |
Gets the real horizontal scale factor used to display the image. |
- | |
| WebImageViewer.ImageBorderSize |
getImageBorderSize():int setImageBorderSize(value:Int) |
Gets or sets the number of pixels to leave as buffer between the control and the image. |
Int represents the number of pixels to leave as buffer between the control and the image. |
| WebImageViewer.ImageFrameColor |
getImageFrameColor():string setImageFrameColor(value:String) |
Gets or sets the color of the image frame. |
String representing the CSS color of the image frame. |
| WebImageViewer.ImageFrameSize |
getImageFrameSize():int setImageFrameSize(value:Int) |
Gets or sets the size of the frame to be added to the image. |
Int representing the size of the frame. |
| WebImageViewer.ImageInfo |
getImageInfo():ltwfImageInfo |
Gets information about the image currently loaded in the control. |
- |
| WebImageViewer.ImageUrl |
getImageUrl():string |
Gets the URL of the image currently loaded. |
- |
| WebImageViewer.InteractiveZoomPercent |
getInteractiveZoomPercent():int setInteractiveZoomPercent(value:Int) |
Gets or sets the percentage that the Leadtools.Web.Controls.WebImageViewer.ScaleFactor property will change when one of the Leadtools.Web.Controls.ImageViewerMouseInteractiveMode zoom interactive modes used. |
Int representing the percentage that the Leadtools.Web.Controls.WebImageViewer.ScaleFactor property will change when one of the Leadtools.Web.Controls.ImageViewerMouseInteractiveMode zoom interactive modes used. |
| WebImageViewer.MaxScrollPosition |
getMaxScrollPosition():ltwfPoint |
Gets the maximum scroll position the image can scroll to. |
- |
| WebImageViewer.MouseInteractiveMode |
getMouseInteractiveMode():ltwfMouseInteractiveMode |
Gets the behavior of the left/right mouse button when interacting with the viewer. |
- |
| WebImageViewer.OpenImageUrl | OpenImageUrl(imageUrl: String, pageIndex: Int); | 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():String |
Gets the virtual path to where resources(icons, scripts) are located. |
- | |
|
getScaleFactor():Double setScaleFactor(value:Double) |
Gets or sets the zoom factor used to display the image. |
Double representing the zoom factor to be used in displaying the image 1 means displaying the image in original width/height (1:1). |
|
|
getScrollBarVisible():bool |
Gets the visibility of the scrollbars. |
- | |
|
getScrollPosition():ltwfPoint setScrollPosition(value:ltwfPoint) |
Gets or sets the scroll bar position. |
ltwfPoint 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. |
Int (0-4), 0:Normal, 1:Stretch, 2:FitAlways, 3:FitWidth, 4: Fit. |
|
|
getTileSize():ltwfSize setTileSize(value:ltwfSize) |
Gets or sets the size (width/height) in pixels of the tiles that the image is divided. |
ltwfSize representing the size (width/height) in pixels of the tiles that the image is divided. |
|
| Tooltip |
getTooltip():string setTooltip(value:String) |
Gets the text displayed when the mouse hovers over the web control. |
String representing the text displayed when the mouse hovers over the web control. |
| WebImageViewer.UseDpi |
getUseDpi():bool setUseDpi(value:bool) |
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():Double |
Gets the real vertical scale factor used to display the image. |
- | |
|
getInputProfile(): string setInputProfile(value: string) |
Gets or sets the url of the XML file that contains the codecs options to be used as load options. |
string url of the XML file that contains the codecs options to be used as load options. |
|
|
getOutputProfile(): string setOutputProfile(value: string) |
Gets or sets the url of the XML file that contains the options to be used as codecs save options for the image displayed by the WebImageViewer. |
string the url of the XML file that contains the options to be used as codecs save options for the image displayed by the WebImageViewer. |
|
| Visible |
getVisible():bool setVisible(value:bool) |
Gets or sets whether show/hide the control on the web page. |
String representing whether to show/hide the control. 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 |
VisibleChanged |
Visible property is 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 |
VisibleChanged |
Visible property is changed. |
Products | Support | Contact Us | Copyright Notices