Printing Multiple Images (JavaScript)

Take the following steps to add code that prints two images on one page. This code shows you how to control the size and position of images on the page.

1.

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

2.

Add the following code between the <FORM> </FORM> tags to create a command button named btnPrint:

<INPUT TYPE="button" NAME="btnPrint" VALUE="Print" LANGUAGE="VBScript" OnClick="Print()">

3.

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 web browser.</P>
</OBJECT><BR>

4.

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

function Print()   
{
   //Declare the variables for pixel measurements
   var UsableWidth; 
   var UsableHeight; 
   var MaxImageHeight;
  
   //Declare the variables for sizing and positioning the image
   var PrintLeft; 
   var PrintTop; 
   var PrintHeight; 
   var PrintWidth; 
   var CurrentY = 1; 

   //Declare variables used for preserving aspect ratios
   var WidthFactor; 
   var HeightFactor; 

   LEADRasterView1.EnableMethodErrors = false; 
   LEADRasterView1.ScaleMode = 3; 
 
   //Set the variables used for preserving the aspect ratio
   HeightFactor = LEADRasterView1.RasterUnk.BitmapHeight
   WidthFactor = LEADRasterView1.RasterUnk.BitmapWidth
   //Get the page width and height in pixels (dots)   
   UsableWidth = LEADRasterView1.PrinterScaleWidth
   UsableHeight = LEADRasterView1.PrinterScaleHeight
   //Get the maximum height of one image
   MaxImageHeight = UsableHeight / 2; 
   //Size and position the first image, preserving the aspect ratio. 
   //Check to see if using the maximum width will make the image too tall. 
   //Set the dimensions based on the result. 
   if ((UsableWidth * HeightFactor / WidthFactor) < MaxImageHeight) 
   { 
      PrintLeft = 1; 
      PrintTop = CurrentY; 
      PrintWidth = UsableWidth; 
      PrintHeight = PrintWidth * HeightFactor / WidthFactor; 
   }
   else
   {
      PrintLeft = 1; 
      PrintTop = CurrentY; 
      PrintHeight = MaxImageHeight; 
      PrintWidth = PrintHeight * WidthFactor / HeightFactor; 
   }
    
   //Print the first image
   var hDC = LEADRasterView1.PrintStart();
   LEADRasterView1.Render (hDC, PrintLeft, PrintTop, PrintWidth, PrintHeight); 

   //Update the current printing position    
   CurrentY = CurrentY + PrintHeight; 
    
   //Invert the bitmap for the second printing    
   //to show the difference between the second picture and the first
   //RasterProc.Invert(LEADRasterView1.Raster); 
   
   //Size and position the second image, preserving the aspect ratio.    
   //The coding is the same as for the first image.    
   if ((UsableWidth * HeightFactor / WidthFactor) < MaxImageHeight) 
   {        
      PrintLeft = 1; 
      PrintTop = CurrentY; 
      PrintWidth = UsableWidth; 
      PrintHeight = PrintWidth * HeightFactor / WidthFactor; 
   } 
   else
   {
      PrintLeft = 1; 
      PrintTop = CurrentY; 
      PrintHeight = MaxImageHeight; 
      PrintWidth = PrintHeight * WidthFactor / HeightFactor; 
   }
   
   //Print the second image    
   LEADRasterView1.Render (hDC, PrintLeft, PrintTop, PrintWidth, PrintHeight); 
      
   //Finish the page and finish the print job 
   LEADRasterView1.PrintEnd (hDC); 
}

5.

Run your page to test it.