Cropping a Bitmap (Visual Basic Script)

Take the following steps to add code that lets you select an area with a mouse, crop the display to show only that area, and trim the bitmap to match the selected area. (This example uses both cropping and trimming, so that you can see the difference.):

1.

Start with the project that you created in Loading and Displaying an Image.

2.

Add the following code between the <BODY> </BODY> tags to add a LEAD Raster Process object named RasterProc:

<OBJECT ID="RasterProc" NAME="RasterProc" 
   CLASSID="CLSID:00140712-B1BA-11CE-ABC6-F5B2E79D9E3F"
   CODEBASE="path to CAB file/Ltrpr14n.cab">
   <P>This is not supported in the web browser.</P>
</OBJECT><BR>

3.

Add the following code between the <FORM> </FORM> tags to add two buttons: btnCrop and btnTrim:

<INPUT TYPE="button" NAME="btnSelectRect" VALUE="Select Rectangle" LANGUAGE="VBScript"
      OnClick="SelectRect">

<INPUT TYPE="button" NAME="btnTrim" VALUE="Trim Image" LANGUAGE="VBScript"
      OnClick="Trim">

4.

Add the following code between the <SCRIPT> </SCRIPT> tags:

Dim Cropping 'The state when the mouse is used for cropping
Dim StartX 'Starting X position in screen pixels
Dim StartY 'Starting Y position in screen pixels
Dim EndX 'Ending X position in screen pixels
Dim EndY 'Ending Y position in screen pixels

5.

Add the following code between the <SCRIPT> </SCRIPT> tags for btnCrop and btnTrim buttons respectively:

Sub SelectRect()
       'Set the scale mode to twips so that we do not have to
       'translate mouse coordinates
       LEADRasterView1.ScaleMode = 1
       'Initialize cropping so that you can do it more than once
       If Cropping = True Then
           'Set the clipping area to match the image. 
           LEADRasterView1.SetDstClipRect LEADRasterView1.DstLeft, LEADRasterView1.DstTop, LEADRasterView1.DstWidth, LEADRasterView1.DstHeight
           'Display the image
           LEADRasterView1.ForceRepaint
       End If
       'Set a global variable to let other events know that you are cropping
       Cropping = True
       'Set the pointer to a crosshair
       LEADRasterView1.MousePointer = 2
End Sub

Sub Trim()
       'Trim the bitmap. 
       RasterProc.Trim LeadRasterView1.Raster, 0, 0, LEADRasterView1.Raster.BitmapWidth / 2, LEADRasterView1.Raster.BitmapHeight
End Sub

6.

Add the following code between the <HEAD> </HEAD> tags to handle the Main Control’s MouseDown event:

<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseDown(Button, Shift , X , Y)"> 
<!--
    'Save the starting position
    StartX = x
    StartY = y
    'Make the rubberband invisible until the mouse moves
    LEADRasterView1.RubberBandVisible = False
//-->
</SCRIPT>

7.

Add the following code between the <HEAD> </HEAD> tags to handle the Main Control’s MouseMove event:

<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseMove(Button, Shift, x, y)"> 
<!--
   Dim rbX
   Dim rbY
   Dim rbWidth
   Dim rbHeight
   If Cropping = True And Button = 1 Then
           'Get the current mouse position
           EndX = x
           EndY = y
           'Determine the origin of the rubberband rectangle, regardless of which way the mouse moves.
           If EndX > StartX Then
               rbX = StartX
           Else
               rbX = EndX
           End If
           If EndY > StartY Then
               rbY = StartY
           Else
               rbY = EndY
           End If
           'Determine the height and width of the rubberband rectangle
           rbHeight = Abs(StartY - EndY)
           rbWidth = Abs(StartX - EndX)
           'Set the rubberband rectangle
           LEADRasterView1.SetRubberBandRect rbX, rbY, rbWidth, rbHeight
           'Alternatively, you could use the following properties to set the
           'rubberband rectangle.
            LEADRasterView1.RubberBandHeight = rbHeight
            LEADRasterView1.RubberBandLeft = rbX
            LEADRasterView1.RubberBandTop = rbY
            LEADRasterView1.RubberBandWidth = rbWidth
            'Make the rubberband rectangle visible
           LEADRasterView1.RubberBandVisible = True
       End If
//-->
</SCRIPT>

8.

Add the following code between the <HEAD> </HEAD> tags to handle the Main Control’s MouseUp event:

<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseUp(Button, Shift, x, y)"> 
<!--
   Dim CropLeft
   Dim CropTop
   Dim CropWidth
   Dim CropHeight
   If Cropping = True Then
           'Get the current mouse position
           EndX = x
           EndY = y
           'Get the origin of the clipping rectangle.
           'Allow for different mouse drag directions
           If StartX < EndX Then
               CropLeft = StartX
           Else
              CropLeft = EndX
           End If
           If StartY < EndY Then
               CropTop = StartY
           Else
              CropTop = EndY
           End If
           'Get the height and width of the cropped area
           CropWidth = Abs(EndX - StartX)
           CropHeight = Abs(EndY - StartY)
           'Crop and repaint the image
           LEADRasterView1.SetDstClipRect CropLeft, CropTop, CropWidth, CropHeight
           LEADRasterView1.ForceRepaint
           LEADRasterView1.RubberBandVisible = False
           LEADRasterView1.MousePointer = 0 'Default
   End If
//-->
</SCRIPT>

9.

Run your page to test it.