Take a screenshot in Flex and send it to ASP.NET

22 Apr, 2008 actionscript, asp.net, flex

In Adobe Flex 3, you can get a bitmap image of any control by using this code (you’ll need to import "mx.graphics.ImageSnapshot"):

var snapshot:ImageSnapshot =  ImageSnapshot.captureImage(backgroundCanvas);

By default, it uses PNG encoding.

If you want to then send this image to the server, use this code:

var req:URLRequest = new URLRequest();
req.method = URLRequestMethod.POST;
req.data = snapshot.data;
req.contentType="application/octet-stream";
req.url = "snapshotuploadhandler.aspx";
var loader:URLLoader = new URLLoader;
loader.load(req);

Reading the uploaded file is easy using ASP.NET:

private byte[] readPostedFile()
{
   if (Request.ContentLength > 0)
   {
       byte[] buffer = new byte[Request.ContentLength];
       using (BinaryReader br = new BinaryReader(Request.InputStream))
           br.Read(buffer, 0, buffer.Length);
       return buffer;
   }
   else
   {
       return null;
   }
}

6 Comments so far »

Ria Flex said,

Wrote on April 22, 2008 @ 4:11 pm

Nice example but I was wondering why you used URLLoader instead of HttpService?
SuperJason said,

Wrote on April 22, 2008 @ 4:21 pm

I didn’t really have a preference. I’m kind of assuming that the URLLoader is a little more lightweight. (but you know what they say about people that assume)

Is there an advantage to using HttpService?
Adam said,

Wrote on April 24, 2008 @ 3:57 pm

I’m so lucky you blogged this just a couple days ago - it was exactly what I’m looking for. Thanks!
Roohullah said,

Wrote on April 26, 2008 @ 2:06 am

this is very cool sample of flex ability in bitmap tools.
thank you

oh, i agree SuperJason, because in this case we should use this class (simple and lighter)
in the adobe live docs, advise to all user if we want use the actionscript only, the URLLoader is better.
Daily del.icio.us for April 26th through April 27th — Vinny Carpenter’s blog said,

Wrote on April 27, 2008 @ 7:06 pm

[...] Take a screenshot in Flex and send it to ASP.NET | YTechie.com - In Adobe Flex 3, you can get a bitmap image of any control by using this code (you’ll need to import "mx.graphics.ImageSnapshot"): [...]
links for 2008-04-29 « Tathata - d’ Observer said,

Wrote on April 28, 2008 @ 8:53 pm

[...] Take a screenshot in Flex and send it to ASP.NET (tags: flex screenshot customer service) [...]