Skip to content


AIR Screenshot Applications

I know there are tons of AIR applications that will allow you to take a screenshot of a website, but I still wondered how this worked. Here is my first version, my only issue is that the image that is saved is only taking an image of what is visible within the viewable area. So, if the site’s bounds are larger than the application, then the image will get truncated… not sure what I need to do to fix this (scaling down?). Anyways, if any one knows I would be grateful for the help.

Here is my code:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”1024″ height=”768″>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

/*

For the Web Browser

*/

private function showWebPage(url:String):void

{

var siteurl:String = new String;

if ( url == "http://" )

{

siteurl = "http://www.google.com";

}

else if ( url.search("http://") < 0)

{

siteurl = "http://" + url;

}

else

{

siteurl = url;

}

html.location = siteurl;

}

/*

For the Screen Capture

assistance: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=8406

*/

import flash.display.BitmapData;

import mx.graphics.codec.JPEGEncoder; // encode to jpeg

private function openDialogue():void

{

var docsDir:File = File.documentsDirectory;

var f:File = new File( "/.jpg" );

try{

f.browseForSave("Save As");

f.addEventListener(Event.SELECT, saveData);

}

catch(e:Error)

{

trace(e.message);

}

}

private function saveData (e:Event):void

{

// take the snapshot

var bmpd:BitmapData = new BitmapData ( html.contentWidth, html.contentHeight );

// draw method public function draw(source, matrix, colorTransform, blendMode, clipRect, smoothing:Boolean = false

var drawRect:Rectangle = new Rectangle ( 0, 0, html.contentWidth, html.contentHeight );

bmpd.draw ( html,null,null,null,drawRect,false );

// encode bitmap data object to bytearray object so

// we can save it to a file

var jpgenc:JPEGEncoder = new JPEGEncoder(80); // 80 compression level

// encode the object

var imgba:ByteArray = jpgenc.encode( bmpd );

// now save it

//gets a reference to a new empty jpg image file in user desktop

var fl:File = e.target as File;

if (!fl.exists)

{

var stream:FileStream = new FileStream();

stream.open(fl, FileMode.WRITE);

stream.writeBytes(imgba);

stream.close();

}

}

]]>

</mx:Script>

<mx:HTML width=”100%” height=”100%” id=”html” x=”0″ y=”40″/>

<mx:TextInput x=”10″ y=”12″ text=”http://” width=”443″ id=”urlPage” />

<mx:Button x=”461″ y=”10″ label=”Go!” click=”showWebPage(urlPage.text)”/>

<mx:Button x=”705″ y=”10″ label=”Save Screen Capture” click=”openDialogue()”/>

</mx:WindowedApplication>

Posted in AIR.


3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. philip andrew says

    Hi,
    Did you manage to make it capture the entire page?
    I’m interested in this and want to do the same.
    Thanks, Phil

  2. admin says

    Hi Phil, I actually haven’t worked on this in a while – unfortunately I could not find a way to capture an entire page.

    Thanks for looking, Morgan

  3. Rodrigo says

    Hi, I think that it will be very usefull to my website!
    Could you send me a example (html) with the compiled files?
    I am the webmaster of Favoritus site (www.favoritus.com), and I want an way to crop a screenshot and save it with my PHP code.
    Thanks a lot!



Some HTML is OK

or, reply to this post via trackback.