(Flex) How can we get an image without a snapshot of the entire component without scroll bars?

Question

I can take a snapshot of the component. But the problem is that the component is larger than the scrollbars. The saved image has scroll bars (only the visible area is saved). I need the whole component to be saved as an image.

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

But in my case, I want it to be saved using ImageSnapShot (not via FlexPrintJob).

Thanks, Sriss

Answer 1

It seemed to me that I know how to do this, but there seem to be a lot of uncomfortable problems. I earned it, but it’s not nice. :-( Maybe you can improve it.

Here is the code for an example application. Below is the code for the MyCanvas class. When you click the button, the image of the Canvas container, but without the scroll bar, 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(); } } }