Using the WebForm ImageKit Control

The ImageKit control provides a useful interface for displaying images in web applications. Images can be displayed in scale, stretch, or actual size display mode. A variety of image formats can be displayed and images not supported in browsers can be automatically converted so they will be displayed properly in a web page. Because of the differences between major browsers and between different versions of the same browser, some conventions should be followed when using the ImageKit control. By following the steps below, you can be sure that the images you load and display will work regardless of the browser used.

The following section explains the major points to consider when using the ImageKit control.

Using the ImageKit.WPF.Web ImageKit control

The steps for using the ImageKit control are as follows:

1. Add the ImageKit control to the toolbox

The ImageKit installer will automatically add the ImageKit controls to the toolbox. These controls can also be added to the toolbox manually using the following steps:

   1. Right click your mouse in the "Toolbox" and choose to "Add Tab".
   2. After naming the new tab, right click it and select "Choose Items"
   3. Click the "Browse" button and select "Newtone.ImageKit.WPF.Web.ImageKit.dll"
   4. Click the "OK" button

The WebForm ImageKit and PanWindow controls are now registered in the toolbox.

2. Place the ImageKit control on your form

Using your mouse, drag the ImageKit control on to the WebForm. The ImageKit control will appear in the top left corner in its default size. Before changing the ImageKit control's size or location, set the control's position to absolute. Depending on your version of Visual Studio, the steps for doing this is slightly different. To manually set the position of the ImageKit control to absolute, open the html source and in the ImageKit control's tag enter "position: absolute;" under the Style declaration.

<cc1:ImageKit ID="ImageKit1" runat="server" style="position: absolute;" />

After you have set the position to absolute, you will be able to set the size and location of the ImageKit control on your webform.

3. Set the Http Handler

The ImageKit control streams images to the browser where they are displayed. To enable streaming, you must set an http handler. There are two ways to do this. One way is to set the http handler in the web application's web.config file. The other way is to add the IkStream.ashx file to your web project.

Using the Web.Config File:

In VS2010 or earlier, open the web.config file and place the following code within the web.config file

<system.web>

     <httpHandlers>

          <add verb="*" path="IkStream.ashx" type="Newtone.ImageKit.Web.IkStream" />

     </httpHandlers>

</system.web>

For VS2012 or later, use this code in the web.config file

<system.webServer>

     <handlers>

          <add verb="*" path="IkStream.ashx" name="IkStream" type="Newtone.ImageKit.Web.IkStream" />

     </handlers>

</system.webServer>

Using the IkStream.ashx file:

Instead of adding the http handler code to web.config, you can add the http handler as a file. The ImageKit ships with an http handler file called IkStream.ashx. Simply copy this file to a directory within the scope of your web application then add it to your Visual Studio project. Do this by right clicking the Solution Explorer and choosing "Add" --> "Existing Item" and then browse to the IkStream.ashx file.

You can find the IkStream.ashx file in the folder called "System" under the directory where you installed the ImageKit.

4. Set the code to load and display the image.

Below is an example of code that streams a TIF file from the server to the client browser. The code is under the Page_Load event.

[Visual Basic]

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    ImageKit1.Url = "abc.tif"

    ImageKit1.LoadImageFromFile()

    ImageKit1.DisplayMode = Newtone.ImageKit.WPF.Web.DisplayMode.Scale

    ImageKit1.Display()

End Sub

[C#]

private void Page_Load(object sender, System.EventArgs e)

{

    ImageKit1.Url="abc.tif";

    ImageKit1.LoadImageFromFile();

    ImageKit1.DisplayMode = Newtone.ImageKit.WPF.Web.DisplayMode.Scale;

    ImageKit1.Display();

}

Be sure that the image being loaded is within the scope of the web application. This means that the image must be in the web application's root folder or in a subfolder that is accessible by the web application. The path to the image is set in the ImageKit1.Url property. In the case above, because the image is in the root directory, the relative virtual path is just the file name of the image. Note: The Url property must be set with a virtual path within the scope of the web application. It cannot be set with a physical path. For more information, please refer to the Url property.

 

ImageKit.WPF.Web.ImageKit Members | Newtone.ImageKit.WPF.Web.ImageKit