Apache – open a browser window to view an image created by a flex 3 application

apache-flexflex3

I have a flex 3 application that creates an Image from a canvas which the user draws on. I use the ImageSnapshot class to create the image

var imageSnap:ImageSnapshot=ImageSnapshot.captureImage(myCanvas);
            var imageByteArray:ByteArray=imageSnap.data as ByteArray;

I want the user to be able to print or save the image. I can use the following code to print the image but flex does not provide good control over printing across multiple pages

var printJob:FlexPrintJob=new FlexPrintJob();
                printJob.start();
                printJob.addObject(myCanvas, FlexPrintJobScaleType.SHOW_ALL);

I would like to display the image in a browser window so that the user could print it using the built in browser functionality or right click on the image and save it. Can this be done without requesting server side code to do it?
I know that flash player 10 and flex 4 allow you to save files locally but for now I am stuck with player 9 and flex 3

Best Answer

You can still use the new features of FileReference (the save() and load() methods) in Flex 3 as long as the application is running in Flash Player 10. But if you are definitely stuck with Flash Player 9 then you will need to push the image up to the server first. If you are looking for a good way to push that data up to the server, please reference my solution in this question:

Flex: Render an unrealized UIComponent to BitmapData?

Related Solutions

How to convert a file to a ByteArray in Flex

Provided you're targeting Flash Player 10, this should work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="loadFile()">

    <mx:Script>
        <![CDATA[

            private var loadedFile:ByteArray;

            private function loadFile():void
            {
                var request:URLRequest = new URLRequest("http://test.enunciato.org/sample.pdf");
                var urlLoader:URLLoader = new URLLoader(request);

                urlLoader.addEventListener(Event.COMPLETE, onURLLoaderComplete);
                urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
                urlLoader.load(request);
            }

            private function onURLLoaderComplete(event:Event):void
            {
                loadedFile = event.target.data;
            }

            private function saveLoadedFile():void
            {
                var file:FileReference = new FileReference();
                file.save(loadedFile, "SampleDoc.PDF"); 
            }

        ]]>
    </mx:Script>

    <mx:Button label="Save Image" horizontalCenter="0" verticalCenter="0" click="saveLoadedFile()" />

</mx:Application>

Assuming you load the file first -- in this example, the load operation happens on creationComplete, and the bytes get stored off in loadedFile -- the bytes should be and ready for saving when the user clicks Save Image. Tested and verified the example works. Hope it helps!

R – Flex printing on OSX pushes image off the page. How to this be fixed

Switch to PDF generation. There are two ways to do this without having to purchase server-side licenses:

Use our library of Flex components - clear.swc, a part of open source Clear Toolkit available on Sourceforge. This process is described in Ch. 11 of the book Enterprise Development with Flex currently available as rough cuts on safaribooksonline.com
Use open-source library alivePDF.

Don't print by Flex PrintJob :)

Best Answer

Related Solutions

How to convert a file to a ByteArray in Flex

R – Flex printing on OSX pushes image off the page. How to this be fixed

Related Topic