Flex/Flash/Actionscript

Save a snapshot image of a Flex app without a server

Someone asked a question on flexcoders about taking a snapshot of a Flex chart and saving it to the clipboard. Well, that’s actually pretty hard, but this example shows how to load a snapshot image of any Flex component that the user can choose to copy or save. It opens a popup window with the image embedded. You’ve still got to right click on the image and either “Copy Image” or “Save Image As…”. But no server is required, it’s all done on the client with a magic little javascript trick.

It uses the data: URI schema supported by Firefox and other non-crappy browsers (no, IE does not support the data: URI syntax). So this works in Firefox, but does not work in IE. Whatever, fuck em.

I saw this method first demonstrated by Mansour Raad at 360Flex. It’s pretty clever. There are some limitations though:

  • Doesn’t work in IE (after writing Flex apps so much I forgot how much browser differences suck… I hate browsers)
  • There’s a limit on how much data you can embed in a data: URI, I don’t know what this is, it might be 1,024 bytes. So this might not work with really big images.

The sample app shows a little chart that plots the framerate of the Flex app. When you click on one of the snapshot buttons it will open a popup window with an image of the chart at that time. From there you can right click and save or copy or whatever. This also makes use of Abdul Qabiz’s javascript injection technique, which allows me to write and execute JavaScript code from within my Flex app. And I’m using the PNGEncoder class in as3corelib.

View the source here.

This movie requires Flash Player 9.

Related:

  • Pretty sweet logo, whoever designed that must be pretty much the best person in the world. Get your 360|Flex stuff here. And if you haven't registered for 360Flex, do that here.
    Tags: flex, pretty
  • Payback's a Queen! Nate got a special surprise in the middle of his session at 360|Flex. This should teach you a) don't fuck with me and b) don't do a presentation on your birthday. Happy birthday Nate! P.S. Apologies for the shaky camera work, there were plenty of other video…
    Tags: flex, work
Standard

21 thoughts on “Save a snapshot image of a Flex app without a server

  1. I don’t see anything happening in FF (2.0.0.4). I click on both of the snapshot buttons and no pop-up or warning. I tried turning off block pop-ups and refreshed the page, but no new window/tab. Interesting approach though.

  2. @Derek: I dunno, it uses a Javascript call to open the popup, maybe JS is disabled in your browser? Do you see any javascript errors?

  3. Jeff D says:

    I can’t see it in FF 2.0.0.4 or IE 7. Doug, what browser version are you developing with?

  4. Huh, I don’t know, maybe it doesn’t work on Win 2K. I’m using Firefox 2.0.0.4 on Mac OS X, and same FF version on Win XP.

  5. suresh says:

    i want only close and open windows without any bowser…..
    hw to solved this problems…. i want in java script with jsp……

  6. Pingback: Rotate using Flex BitmapData and Matrix

  7. Pingback: [flexcoders] Re: Saving or Exporting application charts as images?

  8. AnonFlasher says:

    Anyone know how to get this to work in IE? Not that I want to but I am limited to one browser for the Infranet we use.

  9. Pingback: Save Flex chart as image « Odds On Flex

  10. Nimesh Nanda says:

    Hey, why is not working In IE 6.0 ..

    plz resolve this problem………

    thanks,
    nimesh nanda

  11. ThaStyle says:

    works fine over here on all win os with ff 3.5.3 – 3.*
    i hate browser isues. i was wondering besides rotating can we also do a resize ?
    great stuff

  12. Flex new says:

    Hi..
    Am new to flex after downloading both zip files where i want to place both the files.
    help me. Plz..

  13. Michael says:

    I needed to change PNGEncoder to “var encode : PNGEncoder = new …” and then use encode.encode()

    Other then that – absolutely brilliant! I love it!!!!

    m

  14. Anjan Anil says:

    Hi,

    Its pretty cool application… But i want text input as image and it should display their itself.. so can u help me..

  15. Rumpelstilzchen says:

    thanx doug,
    you saved my day! i was trying to realize this feature for several days..
    meanwhile i was trying to save it in a db via hibernate an provide it by the server, uuaahh – finally i can get rid of that idea :)))

    best regards

  16. Pingback: harikrishnaflex

  17. Lee Dzung says:

    I get the error 1120: Access of undefined property PNGEncoder and don’t know how to get it fixed.
    Please help me

Comments are closed.