Cropping a Bitmap 2 (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> and </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 web browser.</P>
</OBJECT><BR>
3. |
Add the following code between the <FORM> and </FORM> tags to add Two buttons: btnCropp 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> and </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()
LEADRasterView1.EnableFireMouse2Event = True
'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 MouseDown2 event: |
<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseDown2(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 MouseMove2 event: |
<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseMove2(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 MouseUp2 event: |
<SCRIPT LANGUAGE="VBScript" FOR="LEADRasterView1" EVENT="MouseUp2(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. |