如何将图像从 Flash 传递到 ASP.NET?

问题描述

快速版:

如何将在用户浏览器上生成的图像返回到服务器?

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

目前的计划是这样的:

1. Flash 开发人员会将位图转换为 JPEG
2. 然后他会将 JPEG 发布到网站上的页面.
3. 我想我可以创建一个 WebService，它将使用 StreamReader 读取帖子并将其保存为文件.

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?

我想我们应该能够查看将任何文件上传到 ASP.NET 的代码.

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

推荐答案

在这个例子中，我创建了一个带有舞台按钮的 Flash 文件.当您单击该按钮时，Flash 会将按钮的图像发送到一个 ASPX 文件，该文件将其另存为 JPEG.正如您将看到的，这是通过将 DisplayObject 绘制到 BitmapData 对象中来完成的，因此，您可以轻松地使用从 继承的任何内容替换对按钮的引用>DisplayObject(包括一个包含用于绘画应用程序等的画布的影片剪辑).

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).

我将首先向您介绍 Flash 元素，然后是 .NET 后端.

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

闪光

要将生成的图像从 Flash 发送到 ASP.NET(或任何其他后端)，您将需要几个 3rd 方库.我们需要一个 JPEG 编码器(Flash 没有，但最新版本的 Flex 有)，我们可以从 AS3 Core Lib http://code.google.com/p/as3corelib/.我们还需要一个 base64 编码器来通过网络发送数据.我将使用 Dynamic Flash 中的一个，可在 http://dynamicflash.com/goodies/base64/.

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/.

下载这些并将它们解压缩到硬盘上的某个位置(如 C:lib 文件夹).

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

我创建了一个新的 AS3 Flash 文件并将其保存为 uploader.fla.我向舞台添加了一个按钮组件并将其命名为 btnUpload.接下来，我编辑了 ActionScript 设置并将我的 c:lib 文件夹添加到类路径中.然后我给文档一个 Uploader 的类名并保存文件.

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.

接下来，我创建了一个 ActionScript 文件并向其中添加了以下代码:

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

我将此文件保存在 FLA 旁边，名称为 Uploader.as.

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

我将 SWF 发布到我的 Asp.NET 网站的根目录中.此代码假设您要以 100% 的质量上传 jpeg，并且将接收数据的脚本称为 upload.aspx 并位于站点的根目录中.

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

在我网站的根目录中，我创建了一个名为 upload.aspx 的 WebForm.在 .aspx 文件中，我删除了除页面指令之外的所有内容.它的内容是这样的:

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" %>

然后在 CodeBehind 中，我添加了以下内容:

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.

这篇关于如何将图像从 Flash 传递到 ASP.NET?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！