Question

I can take snapshot of a component. But the problem is the component is lil bigger with scroll bars. The saved image has scrollbars (only the visible area is getting saved). What i need is I want the entire component to be saved as an image.

This exact functionality is available while we print the component using FlexPrintJob, where by setting the FlexPrintJobScaleType.NONE.

But here in my case i want it to be saved using ImageSnapShot ( not thru FlexPrintJob ).

Thanks Advance,
Sriss

Answer 1

I thought I knew how to do this, but there seem to be lots of awkward issues. I got it working but it’s not nice. 🙁 Maybe you can improve on it.

Here’s the code for an example application. And below is the code for the MyCanvas class. When you click the button an image of the Canvas container but without scrollbars should be drawn.

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="*">
        <mx:Script><![CDATA[
            import flash.display.BitmapData;
            import flash.events.Event;
            import mx.containers.Canvas;
            import mx.graphics.ImageSnapshot;
            import flash.geom.Matrix;
            import mx.core.ScrollPolicy;

            public function onclick():void
            {
                var bitmapData:BitmapData = ImageSnapshot.captureBitmapData(canvas);
                canvas.addEventListener("BitMapReady", onBitMapReady);
                canvas.horizontalScrollPolicy = ScrollPolicy.OFF;
                canvas.CreateBitMapData();
            }
            private function onBitMapReady(e:Event):void
            {
                DrawBitmapDataAt(canvas.bitMapData, 100, 100);
                canvas.removeEventListener("BitMapReady", onBitMapReady);
                canvas.horizontalScrollPolicy = ScrollPolicy.AUTO;
            }
            private function DrawBitmapDataAt(bitmapData:BitmapData,x:int,y:int):void
            {
                var matrix:Matrix = new Matrix();
                matrix.tx = x;
                matrix.ty = y;
                box.graphics.lineStyle(0,0,0);
                box.graphics.beginBitmapFill(bitmapData, matrix, false);
                box.graphics.drawRect(x,y,bitmapData.width,bitmapData.height);
            }
        ]]></mx:Script>
        <mx:Box id="box">
            <my:MyCanvas width="50" height="50" backgroundColor="white" id="canvas">
                <mx:Button label="Hello" click="onclick()" />
            </my:MyCanvas>
        </mx:Box>
    </mx:Application>

MyCanvas class:

package  
{
    import flash.events.Event;
    import flash.events.TimerEvent;
    import mx.containers.Canvas;
    import flash.display.BitmapData;
    import mx.core.ScrollPolicy;
    import mx.graphics.ImageSnapshot;
    import flash.utils.Timer;

    public class MyCanvas extends Canvas
    {
        public var bitMapData:BitmapData;
        private var creatingBitMap:Boolean = false;
        private var timer:Timer;

        public function CreateBitMapData():void
        {
            this.horizontalScrollPolicy = ScrollPolicy.OFF;
            creatingBitMap = true;
        }
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (creatingBitMap == true && this.horizontalScrollBar == null)
            {
                bitMapData = ImageSnapshot.captureBitmapData(this);
                this.dispatchEvent(new Event("BitMapReady"));
                creatingBitMap = false;
                timer = new Timer(10);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                this.width += 1;
                timer.start();
            }
        }
        private function onTimer(e:TimerEvent):void
        {
            this.width -= 1;
            trace("timer");
            timer.removeEventListener(TimerEvent.TIMER, onTimer);
            timer.stop();
        }
    }
}