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.
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/ [...]
November 11th, 2008 at 6:49 am
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.
March 5th, 2009 at 8:10 am
[...] off a server (James Ward – RIA Cowboy and Flex Cookbook) or interacting with JavaScript (Doug McCune). However, additions made to the framework in Flex 3 combined with new features of Flash Player [...]
June 19th, 2009 at 4:44 am
Hey, why is not working In IE 6.0 ..
plz resolve this problem………
thanks,
nimesh nanda
October 14th, 2009 at 1:15 pm
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
November 9th, 2009 at 6:13 am
Hi..
Am new to flex after downloading both zip files where i want to place both the files.
help me. Plz..
November 22nd, 2009 at 9:46 pm
PNGEncoder: access of undefined property..
What ll i do.
December 17th, 2009 at 1:42 pm
I needed to change PNGEncoder to “var encode : PNGEncoder = new …” and then use encode.encode()
Other then that – absolutely brilliant! I love it!!!!
m
December 19th, 2009 at 1:05 am
Hi,
Its pretty cool application… But i want text input as image and it should display their itself.. so can u help me..
January 3rd, 2010 at 1:46 pm
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
January 28th, 2011 at 9:01 am
[...] http://dougmccune.com/blog/2007/06/03/save-a-snapshot-image-of-a-flex-app-without-a-server/ [...]
February 23rd, 2011 at 1:12 am
I get the error 1120: Access of undefined property PNGEncoder and don’t know how to get it fixed.
Please help me
March 13th, 2011 at 12:30 pm
Interesting, really nice post for me
April 18th, 2011 at 12:04 pm
Hey, just reading…thought I’d show theres interest!
~Steve…
March 10th, 2012 at 1:48 am
???????????????????????????????????????????
April 8th, 2012 at 10:47 am
You really make it seem really easy together with your presentation but I to find this topic to be actually one thing that I feel I would by no means understand. It seems too complicated and very large for me. I am having a look forward on your next put up, I will try to get the grasp of it!
May 16th, 2012 at 12:49 pm
A popular candy in Latin America is the so-called pirulÃn (also known as pirulÃ), which is a multicolor, conic-shaped hard candy of about 10 to 15 cm long, with a sharp conical or pyramidal point, with a stick in the base, and wrapped in cellophane. In spanish names are chuches and golosinas