¿Cómo paso una imagen de Flash a ASP.NET?

actionscript-3 image-upload

Question

Versión rápida:

¿Cómo devuelvo al servidor una imagen que se generó en el navegador de los usuarios?

El plan actual es este:

1. El desarrollador de Flash convertirá el mapa de bits a JPEG
2. A continuación, PUBLICARÁ el JPEG en una página del sitio.
3. Estoy pensando que puedo crear un WebService que usará un StreamReader para leer la publicación y guardarla como un archivo.

Funcionaría eso? ¿Algun código / muestras existentes para hacer esto?

Supongo que deberíamos poder ver el código para hacer cualquier carga de archivo a ASP.NET.

Answer 1

Haga que publique los archivos como un formulario HTML estándar. Puede acceder a esos archivos en el evento Page_Load de la página que está publicando mediante la siguiente colección

Request.Files

Esto devolverá una colección de HttpPostedFiles tal como lo hace un control FileUpload.

Answer 2

Si necesita manipular la imagen, siempre que pueda obtener un byte [] o un flujo del archivo POSTed, puede crear una imagen de este, por ejemplo,

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

Answer 3

En este ejemplo, he creado un archivo Flash con un botón en el escenario. Cuando hace clic en ese botón, Flash envía la imagen del botón a un archivo ASPX que lo guarda como JPEG. Como verá, esto se hace dibujando DisplayObject en un objeto BitmapData y, como tal, puede reemplazar fácilmente la referencia al botón con cualquier cosa que herede de DisplayObject (incluido un clip de película que contiene el lienzo para una aplicación de pintura, etc.) .

Primero lo guiaré por el elemento Flash y luego al back-end .NET.

Destello

Para enviar una imagen generada como esta de Flash a ASP.NET (o cualquier otro programa) necesitará algunas bibliotecas de terceros. Necesitaremos un Encoder JPEG (que Flash no tiene, pero las versiones recientes de Flex do) que podemos obtener de la biblioteca de código AS3 http://code.google.com/p/as3corelib/ . También necesitaremos un codificador base64 para enviar los datos a través del cable. Usaré el de Dynamic Flash, disponible en http://dynamicflash.com/goodies/base64/ .

Descárguelos y extráigalos en algún lugar sensato de su disco duro (como una carpeta C: / lib).

Creé un nuevo archivo AS3 Flash y lo guardé como uploader.fla . Agregué un componente de botón al escenario y lo llamé btnUpload . A continuación, edité la configuración de ActionScript y agregué mi carpeta c: / lib al classpath. Luego di al documento el nombre de clase de Uploader y guardé el archivo.

A continuación, creé un archivo de ActionScript y le agregué el siguiente código:

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);
        }
    }
}

Guarde este archivo junto al FLA con el nombre Uploader.as .

Publiqué el archivo SWF en la raíz de mi sitio web Asp.NET. Este código supone que desea cargar el archivo JPEG con una calidad del 100% y que el script que recibirá los datos se llama upload.aspx y se encuentra en la raíz del sitio.

ASP.NET

En la raíz de mi sitio web creé un WebForm llamado upload.aspx. En el archivo .aspx, eliminé todo el contenido, aparte de la directiva de la página. Su contenido se ve así:

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

Luego, en CodeBehind, agregué lo siguiente:

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");
    }
}

Obviamente, hay valores codificados, como la ruta de guardado, pero a partir de esto deberías poder crear el sistema que necesites.