One thing that is often needed in Internet programming is the ability to keep an exact record of whatever it is you are working on. If, for example, you present your users with an HTML form, you may want to capture and store an exact copy of that completed form somewhere on your computer. There are many ways to accomplish this, but one of the most useful is turning an HTML page into a JPEG image.

Don't Depend on Users

If you allow users to enter data into an HTML form, chances are you will want a record of that form as it looked when it was filled out. One way to accomplish this is to click the File menu item, then click the Save As menu item, and save your HTML form as a Complete Web Page. A big drawback to this solution is that you are relying on the user to do all that clicking and saving for you. Not a good idea.

The alternative is to automate that process somehow, so that you end up with an exact copy of the HTML form. One way that works is to perform a screen capture of the HTML form and convert it to a JPEG image file. That's what you'll learn how to do in this article.

Assembling the Pieces

To perform a screen capture, we'll use a combination of HTML, JavaScript, a DOS batch file, and Java. The HTML will be the standard HTML form. The JavaScript will be activated by clicking a button on the form, and will then determine the screen size of the HTML form. The DOS batch file will be called by the JavaScript and will, in turn, call the Java program. The Java will be a separate Java application that accepts the screen dimensions and creates a new image file in the root directory of whatever is on the current screen.

HTML and JavaScript

The sample HTML file is available for download. It contains all the embedded JavaScript that you need to make all this work.

What's going on in this code is that this HTML form has a single button named Capture. When the user clicks it, the onClick event will call the JavaScript function named getScreenCaptureDimensions.

The getScreenCaptureDimensions function will do just that; It will determine the dimensions of the current screen. It does this by querying the properties of the document, which is also the HTML form.

The value window.screenLeft is the left-most portion of the HTML form. It is that portion of the form that is on the left side of the browser. The value document.body.clientHeight is the total height of the visible portion of the HTML form. It does not include the toolbar area. The value document.body.clientWidth is the actual width of the HTML form. And, finally, the value window.screenTop is the top line of the HTML form.

Some of this sounds redundant, so let's see how it actually works with the diagram shown in Figure 1.

Notice that, in this example, the HTML form is longer than the actual screen. That is to say that it extends past the visible portion of the screen. The document.body.clientHeight will tell you the height of the screen that is visible. The document.body.clientWidth tells you the width of the visible screen. To determine the last bit of the form that is not actually visible, you need to use the HTML <DIV> tag.

The <DIV> tag allows you to divide an HTML document into logical parts. Once your document has a set beginning and ending point, determined by the opening <DIV> tag and the closing </DIV> tag, you can determine how long the HTML form is. Look at Figure 2.

Figure 2: The <DIV> tag allows you to divide an HTML document into logical parts.

This is the same as the example as shown in Figure 1, but this time the HTML form has a <DIV> tag named DIV1 and a corresponding closing </DIV> tag. With this information, we can now determine the physical height of the form by querying the scrollHeight property of the Div1 division.

Although I'm not going to show you how in this article, if you wanted to capture an image of an HTML form that extended off of the visible display screen, you'd need to scroll the HTML page using some JavaScript, such as the following:

This code will scroll the display screen, based on the values set in the parameters start and amounttoScroll.

Now that we know the dimensions of our visible display screen, the JavaScript will call the function captureScreen. The captureScreen function will use the ActiveX object SHELL (see "JavaScript and the SHELL Command") to execute a simple DOS batch file that resides in the root directory of your PC. In this case, we're executing a Windows shortcut to that .bat file, which is named SCAP1.lnk. The reason I use a shortcut here is that I want the batch file to run in a "minimized" state, because the Java program will capture whatever is on the screen at the time it runs, based on the dimensions that we pass to it. If the DOS batch file were allowed to run in a Normal window, it would overlay the HTML form, and then it would be the DOS window, rather than the HTML form, that we captured. I'll show you how to create a shortcut that runs minimized in just a moment.

But first, let's take a look at the code you'll want to add to a new file you'll need to create named ScreenCapture.bat.

Create the file named ScreenCapture.bat and add to it this line of code, exactly as shown above. Now save that file to the root directory of your PC.

What will happen when the batch program is executed is that the java command will run the Java program named ScreenCapture, which it will find in the C:\ directory of your PC. The batch program will accept five command line parameters, which will correspond to the display screen dimensions and the name of the image file to be created. It will then pass these parms on to the Java program, which does the screen capturing.

Once you've created the ScreenCapture.Bat file, from Windows Explorer, right-click that file and select Create Shortcut. A shortcut will be created in the same directory. Find that shortcut and right-click it, and select Properties. Now change the Run property to Minimized.

The Java

The final piece of our puzzle (who ever said Web programming was easy?) is to compile a Java program named ScreenCapture.java.

Compile this Java program and store its class in the C:\ directory of the PC you want to run it on.

This program will accept the dimensions of the screen (the HTML form) and use the Java class Robot to capture an image of the Rectangle, defined as the visible dimensions of this HTML form. The image is captured to a BufferedImage object, which will then be converted to a JPEG image file using the JPEGImageEncoder class. I realize that's a lot of information, but really, it's not that complex once you play with it a bit and see how it works. If you need more information on using these various classes, be sure to check out the documentation on Sun Microsystem's Web site.

The new image will be named YourImage, because that's the image name that was passed into this Java program from the JavaScript. You can change your own HTML form to use a more dynamic image name, if you like.

One final caveat: Any PC you install this on will also need to have the Java 2 Runtime Environment installed on it. You can download a freely distributable Java 2 Runtime Environment from Sun's Web site. Of course, you'll also need a Java Development Kit installed on the PC you are developing on, to compile the Java application.

Where to Go from Here

So what's next? Using the technique shown here, you can now capture a JPEG image of the current HTML screen. If you need to capture an HTML form that extends beyond the visible display screen, you'll need to add some JavaScript that automatically scrolls the form, to display the remaining, nonvisible portion. If you do that, you'll need to create separate JPEG images for each screen and then "stitch" them together into one final image. To perform this stitching, you can extract the pixels from each form, using the PixelGrabber class, and then create a new combined image of all the separate images. This is actually easier to do than it sounds; in fact, I do it all the time. Just do your homework and research and you'll figure it out.

You can improve the performance of this technique if, instead of using a separate Java application for the screen capture, you combine the Java and the HTML into a single JavaServer Page. This will allow you to avoid using the DOS batch program, too.

The technique shown in this article is actually a very useful technique for turning HTML into an image file. In fact, you can pay big bucks for software to do this very thing for you. However, since you now know how to do it yourself, you can feel free to send the money you saved by not buying the other software directly to me at Guild Companies. I accept bills of any denomination. (Wink!)