Capture BitmapData with JavaScript AIR applications

andyMatthews.net

Capture BitmapData with JavaScript AIR applications

When it comes to AIR application development, those of us using JavaScript are second class citizens. It's unfortunate, but true. Functionality easily available in Flash or Flex is either missing, or difficult to find (and use) in our apps. One such piece of functionality is the ability to capture screen shots, or bitmap data, for use in other parts of your app. In this post, I'll show you how you too can capture bitmap data using JavaScript, and a sprinkling of AS3.

Before beginning this project you'll need to make sure you've got the image classes available from Adobe's CoreLib project. It's a set of helper classes that's not packaged in with AIR. You can also compile your own if you've got Flash, or Flex. Download the SWF and put it aside for now.

Start by creating a new Aptana AIR project
- Call it whatever you like, but make sure to include the AIRaliases and jQuery JavaScript files
- It might also be helpful to include the AIR Introspector file for debugging purposes
Open the main HTML file, usually the same name as your project.
- Make sure that the AIRAliases and jQuery files are included.
Now's when we'll move the SWF file containing the image classes we'll be using, specifically the JPGEncoder class, into our project
Next we'll need to include the SWF file. To do this we add a new script block, as if were including another JS file. This time the type attribute gets set to application/x-shockwave-flash, while the src attribute points to the location of the SWF in your project.
```
&lt;script type="application/x-shockwave-flash" src="lib/ImageEncoderLib.swf"&gt;&lt;/script&gt;
```
Open a new script block, and inside it open a jQuery document.ready block. Inside that, place the following two lines.
```
// binds a click event to the button which fires our screen capture
$('#snagit').bind('click', snagPic);
// displays a message to the user where the capture will be saved.
$('span').html(air.File.desktopDirectory.resolvePath('Images/').nativePath);
```
- Note the use of air.File.desktopDirectory, an AIR property which translates to the location of your desktop based on your operating system.

The last piece of JavaScript code we'll need to add is the snagPic function. Copy this code into your document.ready block as well.


function snagPic() {
	// gets the user specified filename from an input field
	var filename = $('#filename').val() + '.jpg';
	// gets the image quality from an input field
	var quality = $('#quality').val();
}

To the bottom of the snagPic function we'll add the following lines


// built into the AIR runtime
var bitmapData = new window.runtime.flash.display.BitmapData(550,200, false);
// the data we want to store as bitmap
bitmapData.draw(nativeWindow.stage);

Remember when we added the SWF to our project? Since all AIR applications run inside the Flash player, we're able to use existing, or imported Actionscript 3 classes. While the BitmapData class is built into the AIR runtime, the JPGEncoder class is external.


// the next two lines convert the raw bitmap data into a JPG data.
var encoder = new window.runtime.com.adobe.images.JPGEncoder(quality);
var ba = encoder.encode(bitmapData);

Finally we need to take the JPG data and store it to the file system. The last 5 lines open a filestream and write that data.


// creates an image directory on your desktop, writes the image there
newImage = air.File.desktopDirectory.resolvePath("Images/" + filename);
// new filestream
var fileStream = new air.FileStream();
// open the file
fileStream.open(newImage, air.FileMode.UPDATE);
// use the writeBytes method to store binary data
fileStream.writeBytes(ba);
// never forget to close your fileStream
fileStream.close();

If you're following along correctly, your HEAD tag should look something like this


&lt;script type="text/javascript" src="lib/air/AIRAliases.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
&lt;script type="application/x-shockwave-flash" src="lib/ImageEncoderLib.swf"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
	$(document).ready(function(){

		$('input[type=button]').bind('click', snagPic);
		$('span').html(air.File.desktopDirectory.resolvePath('Images/').nativePath);

		function snagPic() {
			var filename = $('#filename').val() + '.jpg';
			var quality = $('#quality').val();
			var bitmapData = new window.runtime.flash.display.BitmapData(550,200, false);
			bitmapData.draw(nativeWindow.stage);
			var encoder = new window.runtime.com.adobe.images.JPGEncoder(quality);
			var ba = encoder.encode(bitmapData);
			newImage = air.File.desktopDirectory.resolvePath("Images/" + filename);
			var fileStream = new air.FileStream();
			fileStream.open(newImage, air.FileMode.UPDATE);
			fileStream.writeBytes(ba);
			fileStream.close();
		}
	});
&lt;/script&gt;

Last but not least we need to add our interface elements. There's nothing special here. Copy and paste these lines into your BODY tag


&lt;label for="fileName"&gt;File name&lt;/label&gt;
&lt;input type="text" id="filename" value="myImage" size="15" /&gt;

&lt;label for="quality"&gt;Quality&lt;/label&gt;
&lt;input type="text" id="quality" value="100" size="3" maxlength="3"/&gt;

&lt;input type="button" id="snagit" value="Pic me!" /&gt;
&lt;br /&gt;&lt;br /&gt;
Images will be saved to: &lt;br /&gt; &lt;span&gt;&lt;/span&gt;

Run your project and you should be able to tweak the filename, and image quality of your capture bitmap image.
A full reference to the available classes in Actionscript 3 can be found here. All of these classes should be directly available in AIR, you just might have to fiddle around to find them.
And finally you can download the full source code of this project

So, while being a JavaScript AIR developer is a little harder in some cases, we can get most (if not all) of what we want accomplished with a little leg work and some perserverance.