How do I Pass an Image from Flash to ASP.NET?

Quick version:

How do I get an image that was generated on the users browser back to the server?

The current plan is this:

  1. The Flash developer will convert the bitmap to JPEG
  2. He will then POST the JPEG to a page on the site.
  3. I’m thinking I can create a WebService which will use a StreamReader to read the post and save it as a file.

Would that work? Any existing code/samples for doing this?

I suppose we should be able to look at code for doing any file upload to ASP.NET.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In this example, I’ve created a Flash file with a button on the stage. When you click that button, the Flash sends the image of the button to an ASPX file which saves it out as a JPEG. As you’ll see this is done by drawing the DisplayObject into a BitmapData object and as such, you can easily replace the reference to the button with anything that inherits from DisplayObject (including a movie clip that contains the canvas for a paint application etc).

I’ll walk you through the Flash element first and then the .NET backend.

Flash

To send a generated image like this from Flash to ASP.NET (or any other backend) you’re going to need a couple of 3rd party libraries. We’ll need a JPEG Encoder (which Flash doesn’t have, but recent versions of Flex do) which we can get from the AS3 Core Lib http://code.google.com/p/as3corelib/. We’ll also need a base64 encoder for sending the data over the wire. I’ll use the one from Dynamic Flash, available at http://dynamicflash.com/goodies/base64/.

Download these and extract them somewhere sensible on your hard disk (like a C:lib folder).

I created a new AS3 Flash file and saved it as uploader.fla. I added a button component to the stage and named it btnUpload. Next I edited the ActionScript settings and added my c:lib folder to the classpath. Then I gave the document a class name of Uploader and saved the file.

Next, I created an ActionScript file and added the following code to it:

package
{
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.URLVariables;
    import flash.utils.ByteArray;
    import fl.controls.Button;
    import com.adobe.images.JPGEncoder;
    import com.dynamicflash.util.Base64;


    public class Uploader extends MovieClip
    {
        // Reference to the button on the stage
        public var btnUpload:Button;

        // Encoder quality
        private var _jpegQuality:int = 100;

        // Path to the upload script
        private var _uploadPath:String = "/upload.aspx";

        public function Uploader()
        {
             btnUpload.addEventListener(MouseEvent.CLICK, buttonClick);
        }

        private function buttonClick(e:MouseEvent):void
        {
            // Create a new BitmapData object the size of the upload button.
            // We're going to send the image of the button to the server.
            var image:BitmapData = new BitmapData(btnUpload.width, btnUpload.height);

            // Draw the button into the BitmapData
            image.draw(btnUpload);

            // Encode the BitmapData into a ByteArray
            var enc:JPGEncoder = new JPGEncoder(_jpegQuality);
            var bytes:ByteArray = enc.encode(image);

            // and convert the ByteArray to a Base64 encoded string
            var base64Bytes:String = Base64.encodeByteArray(bytes);

            // Add the string to a URLVariables object
            var vars:URLVariables = new URLVariables();
            vars.imageData = base64Bytes;

            // and send it over the wire via HTTP POST
            var url:URLRequest = new URLRequest(_uploadPath);
            url.data = vars;
            url.method = URLRequestMethod.POST;

            var loader:URLLoader = new URLLoader();
            loader.load(url);
        }
    }
}

I saved this file next to the FLA with the name Uploader.as.

I published the SWF into the root of my Asp.NET website.
This code assumes you want to upload the jpeg with a quality of 100% and that the script which will receive the data is called upload.aspx and is located in the root of the site.

ASP.NET

In the root of my website I created a WebForm named upload.aspx. In the .aspx file, i removed all the content apart from the page directive. It’s content look like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %>

Then in the CodeBehind, I added the following:
using System;
using System.IO;

public partial class upload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Get the data from the POST array
        string data = Request.Form["imageData"];

        // Decode the bytes from the Base64 string
        byte[] bytes = Convert.FromBase64String(data);

        // Write the jpeg to disk
        string path = Server.MapPath("~/save.jpg");
        File.WriteAllBytes(path, bytes);

        // Clear the response and send a Flash variable back to the URL Loader
        Response.Clear();
        Response.ContentType = "text/plain";
        Response.Write("ok=ok");
    }
}

There are obviously hard-coded values such as the save path but from this you should be able to create whatever system you require.

Method 2

If you need to manipulate the image, as long as you can get a byte[] or a Stream of the POSTed file, you can create an image of it, e.g.

MemoryStream mstr = new MemoryStream(myByteArray);
Image myImage = Image.FromStream(mstr);

Method 3

Have him post the files like a standard HTML form. You can access those files in the Page_Load event of the page he is posting to by using the following collection

Request.Files

This will return a collection of HttpPostedFiles just like what a FileUpload control does.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x