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.
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.
Worked for me. Firefox 2.0.0.4
@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?
I can’t see it in FF 2.0.0.4 or IE 7. Doug, what browser version are you developing with?
I don’t have JS disabled. The only thing I see in the Error console is:
Warning: Error in parsing value for property ‘margin’. Declaration dropped.
Source File: http://images.del.icio.us/static/css/blogbadge.css
Line: 67
I doubt that’s related.
…
I just tried with FF 2.0.0.4 on my XP system and it worked. It doesn’t seem to work on my Win2K system.
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.
Welcome!!! index
i want only close and open windows without any bowser…..
hw to solved this problems…. i want in java script with jsp……
Pingback: Rotate using Flex BitmapData and Matrix
Pingback: [flexcoders] Re: Saving or Exporting application charts as images?
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.
Pingback: Save Flex chart as image « Odds On Flex
Hey, why is not working In IE 6.0 ..
plz resolve this problem………
thanks,
nimesh nanda
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
Hi..
Am new to flex after downloading both zip files where i want to place both the files.
help me. Plz..
PNGEncoder: access of undefined property.. 🙂
What ll i do.
I needed to change PNGEncoder to “var encode : PNGEncoder = new …” and then use encode.encode()
Other then that – absolutely brilliant! I love it!!!!
m
Hi,
Its pretty cool application… But i want text input as image and it should display their itself.. so can u help me..
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
Pingback: harikrishnaflex
I get the error 1120: Access of undefined property PNGEncoder and don’t know how to get it fixed.
Please help me