ActionScript 3.0: Capture Web Page Image

In my recent post, I was trying to find out easy way to capture we page image.
Today, I will show you my small code tip for capturing web page and saving it as image by ActionScript 3.0.

WebPageCapture class

This is the main class for capturing web page and save it as image.
A few points I should comment...

• In captureAndSave method, I have used timer because even after Complete event is triggered, somehow sometimes web page is not rendered properly... (might be depends on web site or lazy javascript loading.)
• requstQueue field is for making sure the request is processed one by one after the former image capturing request is done. You can avoid this if you create HTMLLoader instance for each request.
• Looks default JPEGEncoder is quite slow.... I have googled and found the following great article.
• If you are interested in performance, see this excellent post. I was amazed actually :D
• If you are interested in asynchronous encoding, seethis marvelous post. I was impressed :D

Maybe my next step is creating UI part and make demo on the web :P

package utils.tool 
{
    import flash.display.BitmapData;
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.html.HTMLLoader;
    import flash.net.URLRequest;
    import flash.utils.Timer;
    import mx.graphics.codec.JPEGEncoder;
    
    public class WebPageCapture
    {
        private var html:HTMLLoader;
        private var imageSaver:ImageSaver;
        private var requestQueue:Vector.<WebCaptureRequest>;
        private var processing:Boolean = false;
        private var waitMillSecs:int;
        
        public function WebPageCapture(quality:Number=50, waitMillSecs:int=0) 
        {
            this.html = new HTMLLoader();
            
            // you can use PNGEncoder instead if you like
            this.imageSaver = new ImageSaver(new JPEGEncoder(quality));
            
            this.requestQueue = new Vector.<WebCaptureRequest>();
            this.waitMillSecs = waitMillSecs;
        }
        
        public function captureAndSave(url:String, width:int, height:int, path:String):WebPageCapture
        {
            if (this.processing) {
                this.requestQueue.push(new WebCaptureRequest(width, height, url, path));
                return this;
            }
            
            this.processing = true;
            this.html.width = width;
            this.html.height = height;
            this.html.addEventListener(Event.COMPLETE, complete);
            
            trace("loading " + url);
            this.html.load(new URLRequest(url));
            
            function complete(evt:Event):void
            {
                trace("web page loaded");
                
                // sometimes web page has not been fully rendered even after complete event triggered
                // so wait a bit...
                var timer:Timer = new Timer(waitMillSecs, 1);
                timer.addEventListener(TimerEvent.TIMER, runOnce);
                timer.start();
                
                function runOnce(event:TimerEvent):void {
                    timer.removeEventListener(TimerEvent.TIMER, runOnce);
                    trace("creating capture image....");
                    var capture:BitmapData = createBitmapData(html, false);
                    trace("image created");
                    
                    trace("saving the image....");
                    imageSaver.save(capture, path);
                    trace("image saved to " + path);
                    trace();

                    html.removeEventListener(Event.COMPLETE, complete);
                    processing = false;
                    timer = null;
                    
                    if (requestQueue.length > 0) {
                        var queuedRequest:WebCaptureRequest = requestQueue.shift();
                        captureAndSave(queuedRequest.url, queuedRequest.width, queuedRequest.height, queuedRequest.path);
                    }
                }
            }
            
            return this;
        }
        
        public static function createBitmapData(obj:DisplayObject, smoothing:Boolean = false):BitmapData
        {
            var bitmapData:BitmapData = new BitmapData(obj.width, obj.height);
            bitmapData.draw(obj, null, null, null, null, smoothing);
            return bitmapData;
        }
        
    }

}

Trivial Classes Used in the WebPageCapture Class

package utils.tool 
{
    public class WebCaptureRequest 
    {
        private var _width:int;
        private var _height:int;
        
        private var _url:String;
        private var _path:String;
        
        
        public function WebCaptureRequest(width:int, height:int, url:String, path:String) 
        {
            this._width = width;
            this._height = height;
            this._url = url;
            this._path = path;
        }
        
        public function get width():int {
            return _width;
        }
        
        public function get height():int {
            return _height;
        }
    
        public function get url():String {
            return _url;
        }
        
        public function get path():String {
            return _path;
        }
    }

}

package utils.tool
{
    import flash.display.BitmapData;
    import flash.errors.IOError;
    import flash.filesystem.File;
    import flash.filesystem.FileMode;
    import flash.filesystem.FileStream;
    import flash.utils.ByteArray;
    import mx.graphics.codec.IImageEncoder;
    
    public class ImageSaver
    {
        private var encoder:IImageEncoder;
        private var fs:FileStream;
        
        public function ImageSaver(encoder:IImageEncoder) {
            this.encoder = encoder;
            this.fs = new FileStream();
        }
        
        public function save(bitmap:BitmapData, path:String):void {
            try {
                // looks encoding is a bit slow for my environment :( 
                var bytes:ByteArray = this.encoder.encode(bitmap);
                
                this.fs.open(new File(path), FileMode.WRITE);
                
                fs.writeBytes(bytes);
            }
            catch (err:IOError) {
                trace(err);
            }
            finally {
                fs.close();
            }
        }
    }
    
}
}

How to Use

package utils.tool 
{
    import flash.display.Sprite;
        
    public class WebPageCaptureMain extends Sprite
    {
        
        public function WebPageCaptureMain() 
        {
            var webPageCapture:WebPageCapture = new WebPageCapture();
            
            webPageCapture.captureAndSave("http://www.google.com/ncr", 1024, 768, "c:/temp/google.jpg")
                          .captureAndSave("http://www.yahoo.com",      1024, 768, "c:/temp/yahoo.jpg")
                          .captureAndSave("http://www.bing.com",       1024, 768, "c:/temp/bing.jpg");
        }
    }

}