Cropping a Bitmap (JavaScript)

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: btnCropp and btnTrim:

<INPUT TYPE="button" NAME="btnSelectRect" VALUE="Select Rectangle" LANGUAGE="JavaScript"
      OnClick="SelectRect()">

<INPUT TYPE="button" NAME="btnTrim" VALUE="Trim Image" LANGUAGE="JavaScript"
      OnClick="Trim()">

4.

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

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

5.

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

function 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) 
    {
        //Set the clipping area to match the image. 
        LEADRasterView1.SetDstClipRect (LEADRasterView1.DstLeft, LEADRasterView1.DstTop, LEADRasterView1.DstWidth, LEADRasterView1.DstHeight); 
        //Display the image
        LEADRasterView1.ForceRepaint ();
    }
    //Set a global variable to let other events know that you are cropping
    Cropping = true; 
    //Set the pointer to a crosshair
    LEADRasterView1.MousePointer = 2; 
}

function Trim()
{
   LEADRasterView1.ScaleMode = 3; 
   //Trim the bitmap.    
   RasterProc.Trim(LEADRasterView1.RasterUnk, 0, 0, 200, LEADRasterView1.Raster.BitmapHeight);
}

6.

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

<SCRIPT LANGUAGE="JavaScript" 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="JavaScript" FOR="LEADRasterView1" EVENT="MouseMove(Button, Shift, x, y)">
<!--
   var rbX; 
   var rbY; 
   var rbWidth; 
   var rbHeight; 
   if (Cropping == true && Button == 1) 
   {
      //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) 
         rbX = StartX; 
      else
         rbX = EndX; 
    
      if (EndY > StartY) 
         rbY = StartY; 
      else
         rbY = EndY; 
    
      //Determine the height and width of the rubberband rectangle
      rbHeight = Math.abs(StartY - EndY); 
      rbWidth = Math.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; 
   }
//-->
</SCRIPT>

8.

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

<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseUp(Button, Shift, x, y)"> 
<!--   
   var CropLeft
   var CropTop
   var CropWidth
   var CropHeight
   if (Cropping == true) 
   {
         //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) 
             CropLeft = StartX; 
         else
            CropLeft = EndX; 
         
         if (StartY < EndY) 
             CropTop = StartY; 
         else
            CropTop = EndY; 
         
         //Get the height and width of the cropped area
         CropWidth = Math.abs(EndX - StartX); 
         CropHeight = Math.abs(EndY - StartY); 
         //Crop and repaint the image
         LEADRasterView1.SetDstClipRect (CropLeft, CropTop, CropWidth, CropHeight); 
         LEADRasterView1.ForceRepaint ();
         LEADRasterView1.RubberBandVisible = false; 
         LEADRasterView1.MousePointer = 0; //Default
   }
//-->
</SCRIPT>

9.

Run your page to test it.