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.
This entry was posted
on Sunday, June 3rd, 2007 at 3:52 pm and is filed under Flex.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
June 4th, 2007 at 6:17 am
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.
June 4th, 2007 at 10:15 am
Worked for me. Firefox 2.0.0.4
June 4th, 2007 at 10:19 am
@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?
June 4th, 2007 at 7:21 pm
I can’t see it in FF 2.0.0.4 or IE 7. Doug, what browser version are you developing with?
June 5th, 2007 at 7:18 am
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.
June 5th, 2007 at 2:05 pm
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.
August 8th, 2007 at 3:07 pm
Welcome!!! index
August 12th, 2007 at 11:43 pm
i want only close and open windows without any bowser…..
hw to solved this problems…. i want in java script with jsp……
October 11th, 2007 at 12:58 pm
[…] The returned BitmapData can be posted back to a server to write out to the users disk or you can display the data in another Image control. In the example application I show the mothod for both using a trick that Doug McCune posted on his blog. Unfortunately, it only works for Firefox and fails for some larger images. […]
July 3rd, 2008 at 7:30 am
[…] Answered my own question. For anyone reading this, hopefully this link still exists and will answer your question http://dougmccune.com/blog/2007/06/03/save-a-snapshot-image-of-a-flex-app-without-a-server/ […]