{"id":92,"date":"2007-06-03T15:52:41","date_gmt":"2007-06-03T23:52:41","guid":{"rendered":"http:\/\/dougmccune.com\/blog\/2007\/06\/03\/save-a-snapshot-image-of-a-flex-app-without-a-server\/"},"modified":"2007-06-03T15:52:41","modified_gmt":"2007-06-03T23:52:41","slug":"save-a-snapshot-image-of-a-flex-app-without-a-server","status":"publish","type":"post","link":"https:\/\/dougmccune.com\/blog\/2007\/06\/03\/save-a-snapshot-image-of-a-flex-app-without-a-server\/","title":{"rendered":"Save a snapshot image of a Flex app without a server"},"content":{"rendered":"<p>Someone <a href=\"http:\/\/tech.groups.yahoo.com\/group\/flexcoders\/message\/76309\">asked a question<\/a> on flexcoders about taking a snapshot of a Flex chart and saving it to the clipboard. Well, that&#8217;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&#8217;ve still got to right click on the image and either &#8220;Copy Image&#8221; or &#8220;Save Image As&#8230;&#8221;. But no server is required, it&#8217;s all done on the client with a magic little javascript trick.<\/p>\n<p>It uses the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Data:_URI_scheme\">data: URI schema<\/a> 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.<\/p>\n<p>I saw this method first demonstrated by Mansour Raad at 360Flex. It&#8217;s pretty clever. There are some limitations though:<\/p>\n<ul>\n<li>Doesn&#8217;t work in IE (after writing Flex apps so much I forgot how much browser differences suck&#8230; I hate browsers)<\/li>\n<li>There&#8217;s a limit on how much data you can embed in a data: URI, I don&#8217;t know what this is, it might be 1,024 bytes. So this might not work with really big images.<\/li>\n<\/ul>\n<p>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 <a href=\"http:\/\/www.abdulqabiz.com\/blog\/archives\/macromedia_flex\/a_mxml_componen.php\">Abdul Qabiz&#8217;s javascript injection technique<\/a>, which allows me to write and execute JavaScript code from within my Flex app. And I&#8217;m using the PNGEncoder class in <a href=\"http:\/\/code.google.com\/p\/as3corelib\/\">as3corelib<\/a>.<\/p>\n<p><a href=\"\/flex\/snapshots\/srcview\">View the source here<\/a>. <\/p>\n<p><div id=\"swf41861\">This movie requires Flash Player 9.<\/div>\n<script type=\"text\/javascript\">\n\tswfobject.embedSWF(\"\/flex\/snapshots\/SnapShot.swf\", \"swf41861\", \"470\", \"400\", \"9.0.0\", \"\", {}, {wmode: \"window\", menu: \"false\", quality: \"high\", bgcolor: \"#FFFFFF\", allowScriptAccess: \"always\"}, {});\n<\/script>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Someone asked a question on flexcoders about taking a snapshot of a Flex chart and saving it to the clipboard. Well, that&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-flex"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":0,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"wp:attachment":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}