A Simple VB.

NET Application for Image

Editing using csXImage ActiveX Control
The download of either the free trial or registered version of csXImage includes a VB.NET
project. This is a simple image editing application, designed to show how the ActiveX control
csXImage can be used to load, save and edit images.

The following pages show some of the functions that are included in the demo project, with brief
explanation about how these could be used in your own projects.

First, let us look at the demo application in action. The VB project is based on a single form,
fMain. After opening and running the project, the form is displayed with its menu bar. After
selecting File/Open, an image file of one of the formats supported by csXImage can be selected
and opened. The image is loaded into the control on the form and displayed.

The status bar at the bottom of the form displays information about the image: the filename, size
and colour depth. A combo box on the left of the form is now active, with the message 'Select
effect to apply...'. The drop down list displays a selection of the image
manipulation/enhancement functions available in csXImage. We can, for example, select
'Brightness':
A value can now be entered, and the brightness of the image adjusted by clicking 'Apply'. The
colours Red, Green and Blue can be individually selected to tint the image with a particular
colour, or by leaving all three selected, the overall brightness is adjusted.

Adjusting Brightness and Contrast in

VB.NET using csXImage
Brightness
The Brightness method in csXImage provides the ability to increase or decrease the brightness of
images, either as an overall adjustment, or acting on the individual red, green and blue colours in
the image.
The first example below shows an image that has been increased in brightness overall. This was
done using the VB demo application. A value of 60 was used for the brightness, giving a slight
increase. Red, green and blue were all checked to give the overall effect.

Original image

Brightened image

This is equivalent to using the following line of VB code directly:

AxImageBox1.Brightness(65, TRUE, TRUE, TRUE)

A second example shows how an image can be tinted with a specific colour by using the
brightness method acting on only one or two of the colour channels. Here, a greyscale image is
brightened using only red and blue, with green unchanged.
Original image

Tinted image

This is equivalent to the following lines of VB code. Note the need to change the colour format
before using the brightness method. This is because the original image is in a greyscale format
which does not allow colours other than greyscale ones to be introduced into the image.

AxImageBox1.ColorFormat = csXImageTrial.TxColorFormat.cf24bit
AxImageBox1.Brightness(70, TRUE, FALSE, TRUE)

Sharpen
Images which are slightly blurred can be sharpened using the 'Sharpen' or 'SharpenBy' methods.
These give the same effect, the only difference being that 'SharpenBy' gives an option to the user
to define the amount of sharpening to be done. 'Sharpen' uses a default for this parameter.

In the VB demo, the Sharpen option uses the default settings. Using the same image as above,
the effect of the 'Sharpen' method is shown below.

Original image
Sharpened image

This is achieved with the very simple line of code:

AxImageBox1.Sharpen()

Merging Images and Watermarking in Visual

Basic for .NET using csXImage.ocx
Two of the methods for merging images with csXImage are MergeFile and MergeBinary. These
methods each provide the same functionality, enabling a second image to be merged into the
image currently loaded in the control. With MergeBinary, the second image is read from a byte
array variable. MergeFile, which is demonstrated in the demo VB.NET application, reads the
second image from a file on disk.

Several options are available to the user to modify the way that the merge is carried out. These
options are best demonstrated by showing the different effects achieved when a simple
monochrome image, containing black text on a white background, is merged into a full colour
photograph.

The two images being used for this demonstration are shown below. All the following examples
were prepared using the VB.NET demo application, with the photograph on the left as the main
image (loaded into the csXImage control before using the MergeFile method) and the text image
on the right as the second image.
Main image

Second (merged) image

First let's look at the effect of allowing transparency in the second image. If a straightforward
merge is carried out, with no transparency, the second image will be stamped onto the first
image, hiding all the pixels of the first image covered by the rectangle of the second image. This
is shown on the left below. If transparency is allowed in the second image, and the transparent
colour is specified as white, then only the black text will be merged, with the remaining pixels of
the original image retained. This is shown on the right. The equivalent VB code to give these
effects is shown beside each image.

With AxImageBox1
  .MergeStyle =
    csXImageTrial.TxWMStyle.wmCentre
  .MergeTransparent = FALSE
  .MergeFile(MergeFileName)
End With
With AxImageBox1
  .MergeStyle =
    csXImageTrial.TxWMStyle.wmCentre
  .MergeTransparent = TRUE
  .MergeTransparentColor =
    System.Drawing.Color.White
  .MergeTransparency = 0
  .MergeFile(MergeFileName)
End With

In the above examples, the first image has been simply stamped onto the main image.
Alternatively, it can be made more transparent by setting a value for the MergeTransparency
property (0 to 100%). This can give a "watermark" effect. In the images below, a value of 80%
has been used so the second image appears lightly blended into the main image.

Four examples are given, showing the four different values for the MergeStyle property. This
property determines how the second image is positioned on the main image.

With AxImageBox1
  .MergeStyle =
    csXImageTrial.TxWMStyle.wmSingle
  .MergeTransparent = TRUE
  .MergeTransparentColor =
    System.Drawing.Color.White
  .MergeTransparency = 80
  .MergeFile(MergeFileName)
End With

With AxImageBox1
  .MergeStyle =
    csXImageTrial.TxWMStyle.wmTile
  .MergeTransparent = TRUE
  .MergeTransparentColor =
    System.Drawing.Color.White
  .MergeTransparency = 80
  .MergeFile(MergeFileName)
End With

With AxImageBox1
  .MergeStyle =
    csXImageTrial.TxWMStyle.wmCentre
  .MergeTransparent = TRUE
  .MergeTransparentColor =
    System.Drawing.Color.White
  .MergeTransparency = 80
  .MergeFile(MergeFileName)
End With

With AxImageBox1
  .MergeStyle =
    csXImageTrial.TxWMStyle.wmWrap
  .MergeTransparent = TRUE
  .MergeTransparentColor =
    System.Drawing.Color.White
  .MergeTransparency = 80
  .MergeFile(MergeFileName)
End With

In some cases, the image already loaded into the csXImage control is the one that needs to be
used as the second image, with the main image being available on disk. Another property,
MergeReverse, can be used to specify that the images will be merged in the opposite order.

The image resulting from a merge operation always retains the colour format and dimensions of
the main image.

Mouse Events and Reading Pixel Information

with csXImage in VB.NET
The demo application for csXImage includes an option to display information about individual
pixels. This makes use of the 'OnMouseMove' event of the control to trigger VB.NET code when
the mouse cursor is positioned over an image. The information about the colour of the pixel
under the mouse pointer is then read and displayed.

When the pixel information option is activated in the VB demo (using 'Tools/Pixel Info' from the
menu), a cross-hair cursor is displayed when the mouse pointer is over the image. Pixel
information is then read and displayed, as in the screenshot below.
In using this event to provide pixel data we have two problems to consider: (1) The event is fired
whenever the cursor is over the control, even if it is not over the image. In these cases we do not
want information displaying or the cursor changing. (2) The image may be scrolled, which
means the X and Y co-ordinates returned by the OnMouseMove event will not correspond to the
co-ordinates of the pixel in the image.

These problems can be overcome by using a group of properties that provide read-only
information about the status and positioning of the scroll bars. By checking the scroll bar
positions and modifying the X and Y co-ordinates as necessary the correct result can be obtained.

The VB.NET code used in this example is listed below:

Private Sub AxImageBox1_OnMouseMove(ByVal sender As Object, ByVal e

    As AxcsXImageTrial.IImageBoxEvents_OnMouseMoveEvent)
    Handles AxImageBox1.OnMouseMove
  Dim OverImage As Boolean
  Dim PixelCol As System.Drawing.Color

  If mnuToolsPixelInfo.Checked Then

    OverImage = True

    With AxImageBox1

      If Not .HasScrollBarHoriz Then

        If e.x > .ImageWidth - 1 Then
          OverImage = False
        End If
      Else
        If e.x > .ScrollBarHorizWidth - 1 Then
          OverImage = False
        Else
          e.x = e.x + .ScrollBarHorizPos
        End If
      End If

      If Not .HasScrollBarVert Then

        If e.y > .ImageHeight - 1 Then
          OverImage = False
        End If
      Else
        If e.y > .ScrollBarVertHeight - 1 Then
          OverImage = False
        Else
          e.y = e.y + .ScrollBarVertPos
        End If
      End If
    End With

  .
  .
  .

  End If

End Sub

In the code above we use a Boolean 'OverImage' to determine whether or not the cursor is over
the image. This variable is initially set to true, then a number of checks are made to see if it
should be changed to False, or if the co-ordinates should be modified. First we check in the
horizontal direction. If there is no horizontal scroll bar, then the variable is only set to false if the
cursor is further to the right than the width of the image. If there is a horizontal scroll bar, then
we check that the cursor is inside the width of the scroll bar, and if necessary, adjust for the
scroll bar position. The same checks are then repeated in the vertical direction.

Finally, we retrieve and display the pixel information, if the cursor is confirmed to be over the
image.

If OverImage Then
  Me.Cursor = Cursors.Cross
  lblPixelX.Text = "X: " & e.x
  lblPixelY.Text = "Y: " & e.y
  PixelCol = AxImageBox1.get_PixelColor(e.x, e.y)
  lblPixelRed.Text = "Red: " & Str(PixelCol.R)
  lblPixelGreen.Text = "Green: " & Str(PixelCol.G)
  lblPixelBlue.Text = "Blue: " & Str(PixelCol.B)
  lblPixelCol.BackColor = PixelCol
Else
  Me.Cursor = Cursors.Default
  lblPixelX.Text = "X: n/a"
  lblPixelY.Text = "Y: n/a"
  lblPixelRed.Text = "Red: n/a"
  lblPixelGreen.Text = "Green: n/a"
  lblPixelBlue.Text = "Blue: n/a"
  lblPixelCol.BackColor = Me.BackColor
End If

Using this code, the cursor can be moved over the image, with information about the colour of
the pixel under the mouse cursor displayed alongside, as in the screenshot above.

Red-eye reduction in VB.NET using the

csXImage control.
The "Red-Eye" effect spoils many otherwise perfect photos. Even though digital cameras usually
have a flash setting that prevents red-eye, how often do we forget to select that option?

Removing the red glare from the eye is very simple in applications that use csXImage. The
method is demonstrated in the VB.NET demo program supplied in the csXImage download.

The photo is corrected in two steps.

(1) A region around the eye, usually an ellipse or a circle, is selected. This requires just one line
of code.

AxImageBox1.MouseSelectEllipse()

(2) After the user completes the selection using the mouse, two further lines of code adjust the
red intensity for pixels where it is the dominant colour.

AxImageBox1.UseSelection = True
AxImageBox1.ReduceRedEye()

The result is shown below.

Original photo

Selecting the red-eye

The final result