Using the WebImageViewer Control on the client side

Perform the following steps to create a project that uses the features of the LEADTOOLS WebImageViewer Control on the client side:

Start Visual Studio 2005.
Choose File->New->Web Site… from the menu.
In the New Web Site dialog box, choose "ASP.NET Web Site" in the Templates List, and choose either "Visual C#" or "Visual Basic" in the Language drop-down list box.
In the Location drop-down list box choose "File System", enter “C:\Inetpub\wwwroot\UsingImageViewer_Client” into the Project Name field, and then click OK.

If desired, type a new location for your project or select a directory by clicking Browse and browsing to the correct directory, and then click OK.
In the Solution Explorer pane, right-click on the project node, and select "Add Reference…" from the context menu. In the Add Reference dialog box, click the .NET tab, select "System.Windows.Forms", and the click OK to close the Add Reference dialog box.
Repeat the previous step except that in the Add Reference dialog box click the Browse tab and browse to the "<LEADTOOLS_INSTALLDIR>\Bin\DotNet\Win32" folder and select the following DLL:
- Leadtools.Web.dll.
Now click OK to close the Add Reference dialog box.
In the Solution Explorer pane right-click on the "Default.aspx" file and choose "View Designer" from the context menu.
Go to the toolbox (View->Toolbox) and drag and drop an instance of the ImageViewer onto the web form. If you do not have the ImageViewer in your toolbox, select "Tools->Choose Toolbox Items..." from the menu. Click Browse, select "Leadtools.Web.dll" from "<LEADTOOLS_INSTALLDIR>\Bin\DotNet\Win32". Click Open and then OK.
Go to the toolbox (View-Toolbox) and from the Standard tab drag and drop 7 Labels onto the webform, and from the HTML tab drag and drop 4 Input(Text), 4 Select, and 3 Input(Button) controls onto the web form.

Change the properties of the dropped controls as follows:

Control	Property	New Value
Label1	IDText	_lblImageUrlImage Url
Text1	ID	_tbImageUrl
Label2	IDText	_lblImageWidthImage Width
Text2	ID	_tbImageWidth
Label3	IDText	_lblImageHeightImage Height
Text3	ID	_tbImageHeight
Button1	IDValue	_btnGetImageSizeGet Image Size
Button2	IDValue	_btnViewImageView Image
Label4	IDText	_lblSizeModeSizeMode
Select1	ID	_cmbSizeMode
Label5	IDText	_lblScaleFactorScaleFactor
Select2	ID	_cmbScaleFactor
Label6	IDText	_lblHorizontalAlignModeHorizontalAlignMode
Select3	ID	_cmbHorizontalAlignMode
Label7	IDText	_lblVerticalAlignModeVerticalAlignMode
Select4	ID	_cmbVerticalAlignMode
Button4	IDValue	_btnGetRealScaleFactorsGet Real Scale Factors
Text4	ID	_tbRealScaleFactors

Switch to "Default.aspx" code view (Right-click default.aspx in the solution explorer then select View Code) and add the following lines at the beginning of the file:

Visual Basic


Switch to "Default.aspx" code view (Right-click default.aspx in the
                        solution explorer then select View Code) and add the following lines at the
                        beginning of the file: 
Visual Basic
            Imports System.Windows.Forms
            
C#
            using System.Windows.Forms;


Switch to "Default.aspx" code view (Right-click default.aspx in the
                        solution explorer then select View Code) and add the following lines at the
                        beginning of the file: 
Visual Basic


Switch to "Default.aspx" code view (Right-click default.aspx in the
                        solution explorer then select View Code) and add the following lines at the
                        beginning of the file: 
Visual Basic
            Imports System.Windows.Forms
            
C#
            using System.Windows.Forms;


C#
            using System.Windows.Forms;

Update the Page_Load event handler to be as follows:

Visual Basic


Update the Page_Load event handler to be as follows:
Visual Basic
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
               If (Not IsPostBack) Then
                  ' Initialize the ImageViewer control.
                  ImageViewer1.ResourcesPath = "Resources"
                  ImageViewer1.ScrollBarSize = SystemInformation.VerticalScrollBarWidth
               End If
            End Sub
            
C#
            protected void Page_Load(object sender, EventArgs e)
            {
               if(!IsPostBack)
               {
                  // Initialize the ImageViewer control.
                  ImageViewer1.ResourcesPath = "Resources";
                  ImageViewer1.ScrollBarSize = SystemInformation.VerticalScrollBarWidth;
               }
            }


Update the Page_Load event handler to be as follows:
Visual Basic


Update the Page_Load event handler to be as follows:
Visual Basic
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
               If (Not IsPostBack) Then
                  ' Initialize the ImageViewer control.
                  ImageViewer1.ResourcesPath = "Resources"
                  ImageViewer1.ScrollBarSize = SystemInformation.VerticalScrollBarWidth
               End If
            End Sub
            
C#
            protected void Page_Load(object sender, EventArgs e)
            {
               if(!IsPostBack)
               {
                  // Initialize the ImageViewer control.
                  ImageViewer1.ResourcesPath = "Resources";
                  ImageViewer1.ScrollBarSize = SystemInformation.VerticalScrollBarWidth;
               }
            }


C#
            protected void Page_Load(object sender, EventArgs e)
            {
               if(!IsPostBack)
               {
                  // Initialize the ImageViewer control.
                  ImageViewer1.ResourcesPath = "Resources";
                  ImageViewer1.ScrollBarSize = SystemInformation.VerticalScrollBarWidth;
               }
            }

Switch to the "Default.aspx" view and search for the _cmbSizeMode, _cmbScaleFactor, _cmbHorizontalAlignMode, _cmbVerticalAlignMode, _btnGetImageSize, _btnViewImage, and _btnGetRealScaleFactors controls, and then change them to be as follows:


Switch to the "Default.aspx" view and search for the _cmbSizeMode,
                        _cmbScaleFactor, _cmbHorizontalAlignMode, _cmbVerticalAlignMode,
                        _btnGetImageSize, _btnViewImage, and _btnGetRealScaleFactors controls, and then
                        change them to be as follows:
            <pre><input id="_btnGetImageSize" type="button" value="Get Image Size" onclick="return _btnGetImageSize_onclick()" style="width: 146px; height: 22px" />
            <input id="_btnViewImage" style="width: 146px; height: 22px" type="button" value="View Image" onclick="return _btnViewImage_onclick()" />
            <input id="_btnGetRealScaleFactors" type="button" value="Get Real Scale Factors" onclick="return _btnGetRealScaleFactors_onclick()" />
            <select id="_cmbSizeMode" style="width: 476px" onchange="OnChangeSizeMode(this.selectedIndex)">
               <option selected="selected">Normal</option>
               <option>Stretch</option>
               <option>FitAlways</option>
               <option>FitWidth</option>
               <option>Fit</option>
            </select>
            <select id="_cmbScaleFactor" style="width: 476px" onchange="OnChangeScaleFactor(this.options[this.selectedIndex].text)">
               <option>1000</option>
               <option>800</option>
               <option>600</option>
               <option>400</option>
               <option>200</option>
               <option selected="selected">100</option>
               <option>80</option>
               <option>60</option>
               <option>40</option>
               <option>20</option>
               <option>10</option>
               <option>5</option>
               <option>2</option>
            </select>
            <select id="_cmbHorizontalAlignMode" style="width: 476px" onchange="OnChangeHorizontalAlignMode(this.selectedIndex)">
               <option selected="selected">Near</option>
               <option>Center</option>
               <option>Far</option>
            </select>
            <select id="_cmbVerticalAlignMode" style="width: 476px" onchange="OnChangeVerticalAlignMode(this.selectedIndex)">
               <option selected="selected">Near</option>
               <option>Center</option>
               <option>Far</option>
            </select>

Add the following JavaScript methods to the end of "Default.aspx" after the closing tag of form (</form>) and before the closing tag of body (</body>):


Add the following JavaScript methods to the end of "Default.aspx"
                        after the closing tag of form (</form>) and before the closing tag of
                        body (</body>):
            <script type="text/javascript">
               var iurl = document.getElementById("_tbImageUrl");
               var iw = document.getElementById("_tbImageWidth");
               var ih = document.getElementById("_tbImageHeight");
               var bis = document.getElementById("_btnGetImageSize");
               var sf = document.getElementById("_cmbScaleFactor");
               var rsf = document.getElementById("_tbRealScaleFactors");
               var http_request = false;
               function OnChangeSizeMode(m)
               {
                  ImageViewer1.SetSizeMode(m);
                  ImageViewer1.Apply();
                  sf.disabled = (m != 0);
               }
               function OnChangeScaleFactor(s)
               {
                  ImageViewer1.SetScaleFactor(s);
                  ImageViewer1.Apply();
               }
               function OnChangeHorizontalAlignMode(ha)
               {
                  ImageViewer1.SetHorizontalAlignMode(ha);
                  ImageViewer1.Apply();
               }
               function OnChangeVerticalAlignMode(va)
               {
                  ImageViewer1.SetVerticalAlignMode(va);
                  ImageViewer1.Apply();
               }
               function View()
               {
                  ImageViewer1.SetImageUrl(iurl.value);
                  ImageViewer1.SetImageSize(new ltwfSize(iw.value, ih.value));
                  ImageViewer1.Apply();
               }
               function _btnViewImage_onclick()
               {
                  View();
               }
               function _btnGetImageSize_onclick()
               {
                  http_request = CreateXmlHttpRequest();
                  if(http_request != null)
                  {
                     var queryString = 'ImageInfo.leadinfo?url=' + iurl.value;
                     http_request.onreadystatechange = ProcessHttpRequest;
                     http_request.open('GET', queryString, true);
                     http_request.send(null);
                  }
               }
               function ProcessHttpRequest()
               {
                  if (http_request.readyState == 4)
                  {
                     if (http_request.status == 200)
                     {
                        var xmldoc = http_request.responseXML;
                        var xn_w = xmldoc.getElementsByTagName("Width");
                        var xn_h = xmldoc.getElementsByTagName("Height");
                        if (xn_w.length > 0)
                        {
                           var imgWidth = xn_w[0].childNodes[0].nodeValue;
                           iw.value = imgWidth;
                        }
                        
                        if (xn_h.length > 0)
                        {
                           var imgHeight = xn_h[0].childNodes[0].nodeValue;
                           ih.value = imgHeight;
                        }
                     }
                     else
                     {
                        alert("There was a problem with the request.\nError:" + http_request.status);
                     }
                  }
               }
               
               function _btnGetRealScaleFactors_onclick()
               {
                  rsf.value = "Horizontal:" + ImageViewer1.GetHorizontalRealScaleFactor() + ", Vertical:" + ImageViewer1.GetVerticalRealScaleFactor();
               }
               </script>

Your web.config file has to tell the server how to handle the Leadtools.Web.Handlers.ImageInformation requests.

To do this, drill down through the file's schema so you can add the httpHandlers section inside the <system.web> </system.web> tag (if it is not already there), so that it looks like the following:


Your web.config file has to tell the server how to handle the
                        Leadtools.Web.Handlers.ImageInformation requests.
To do this, drill down through the file's schema so you can add the
                        httpHandlers section inside the <system.web> </system.web> tag (if it is 
                        not already there), so that it looks like the
                        following:
            <httpHandlers>
               <add verb="*" path="*.leadinfo" type="Leadtools.Web.Handlers.ImageInformation, Leadtools.Web"/>
            </httpHandlers>

Also you have to set up the IIS to handle the requests for ".leadinfo".

In your Site's properties sheet, click the Home Directory tab and click the Configuration.

This opens the Application Configuration dialog box. In the Application Configuration dialog box click Add and in the Executable edit box browse to the path of the dll "aspnet_isapi.dll" (you can find it in the "C:\Windows\Microsoft.NET\Framework\v2.0.50727" folder), and enter ".leadinfo" in the Extension edit box.

Now click OK in each open dialog box to close the three dialogs.
From the path "<LEADTOOLS_INSTALLDIR>\Bin\DotNet\Win32" copy the "Leadtools.Codecs.Bmp", "Leadtools.Codecs.Gif", "Leadtools.Codecs.Png", and Leadtools.Codecs.Cmp DLLs to the project's Bin folder.
Inside the project folder create a folder named "Resources" and copy all of the java script files and images found in the "<LEADTOOLS_INSTALLDIR>\Examples\DotNet\Resources\Web" folder to this new folder.
Run the project and play with it as follows:
1. Type a path to one of the Internet Browser supported formats (gif, bmp, png or jpeg) in the ImageUrl TextBox.
2. Click GetImageSize to update the ImageWidth and ImageHeight Text Boxes by the image width and height.
3. Click ViewImage to load the image into the WebImageViewer control.
4. Change the selections in the drop-down list boxes and notice the differences in the displayed image.