Quick version:
How do I get an image that was generated on the users browser back to the server?
如何将用户浏览器上生成的图像恢复到服务器?
The current plan is this:
目前的计划如下:
- The Flash developer will convert the bitmap to JPEG
- He will then POST the JPEG to a page on the site.
- I'm thinking I can create a
WebService
which will use aStreamReader
to read the post and save it as a file.
Flash开发人员将位图转换为JPEG
然后,他将JPEG发布到网站上的页面。
我想我可以创建一个WebService,它将使用StreamReader读取帖子并将其保存为文件。
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.
我想我们应该能够查看用于将任何文件上传到ASP.NET的代码。
3 个解决方案
#1
13
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文件。单击该按钮时,Flash会将按钮的图像发送到ASPX文件,该文件将其另存为JPEG。正如您将看到的那样,通过将DisplayObject绘制到BitmapData对象中来完成此操作,您可以轻松地将对按钮的引用替换为从DisplayObject继承的任何内容(包括包含绘制应用程序的画布的影片剪辑等) 。
I’ll walk you through the Flash element first and then the .NET backend.
我将首先介绍Flash元素,然后介绍.NET后端。
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/.
要将生成的图像从Flash发送到ASP.NET(或任何其他后端),您将需要几个第三方库。我们需要一个JPEG编码器(Flash没有,但最近的Flex版本),我们可以从AS3 Core Lib http://code.google.com/p/as3corelib/获得。我们还需要一个base64编码器来通过线路发送数据。我将使用Dynamic Flash中的那个,可从http://dynamicflash.com/goodies/base64/获得。
Download these and extract them somewhere sensible on your hard disk (like a C:\lib folder).
下载这些并将它们解压缩到硬盘上的某个位置(如C:\ lib文件夹)。
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.
我创建了一个新的AS3 Flash文件并将其保存为uploader.fla。我在舞台上添加了一个按钮组件,并将其命名为btnUpload。接下来,我编辑了ActionScript设置,并将我的c:\ lib文件夹添加到了类路径中。然后我给文档一个Uploader的类名并保存了文件。
Next, I created an ActionScript file and added the following code to it:
接下来,我创建了一个ActionScript文件并向其添加了以下代码:
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.
我将此文件保存在FLA旁边,名称为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.
我将SWF发布到我的Asp.NET网站的根目录中。此代码假定您要上传质量为100%的jpeg,并且将接收数据的脚本称为upload.aspx,并且位于站点的根目录中。
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:
在我的网站的根目录中,我创建了一个名为upload.aspx的WebForm。在.aspx文件中,我删除了除page指令之外的所有内容。它的内容看起来像这样:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %>
Then in the CodeBehind, I added the following:
然后在CodeBehind中,我添加了以下内容:
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.
显然存在硬编码值,例如保存路径,但是您应该能够创建所需的任何系统。
#2
1
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.
如果你需要操作图像,只要你可以得到一个byte []或一个POSTed文件的流,你就可以创建它的图像,例如
MemoryStream mstr = new MemoryStream(myByteArray);
Image myImage = Image.FromStream(mstr);
#3
0
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
让他像标准HTML表单一样发布文件。您可以使用以下集合在他发布到的页面的Page_Load事件中访问这些文件
Request.Files
This will return a collection of HttpPostedFiles just like what a FileUpload control does.
这将返回一个HttpPostedFiles集合,就像FileUpload控件一样。
#1
13
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文件。单击该按钮时,Flash会将按钮的图像发送到ASPX文件,该文件将其另存为JPEG。正如您将看到的那样,通过将DisplayObject绘制到BitmapData对象中来完成此操作,您可以轻松地将对按钮的引用替换为从DisplayObject继承的任何内容(包括包含绘制应用程序的画布的影片剪辑等) 。
I’ll walk you through the Flash element first and then the .NET backend.
我将首先介绍Flash元素,然后介绍.NET后端。
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/.
要将生成的图像从Flash发送到ASP.NET(或任何其他后端),您将需要几个第三方库。我们需要一个JPEG编码器(Flash没有,但最近的Flex版本),我们可以从AS3 Core Lib http://code.google.com/p/as3corelib/获得。我们还需要一个base64编码器来通过线路发送数据。我将使用Dynamic Flash中的那个,可从http://dynamicflash.com/goodies/base64/获得。
Download these and extract them somewhere sensible on your hard disk (like a C:\lib folder).
下载这些并将它们解压缩到硬盘上的某个位置(如C:\ lib文件夹)。
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.
我创建了一个新的AS3 Flash文件并将其保存为uploader.fla。我在舞台上添加了一个按钮组件,并将其命名为btnUpload。接下来,我编辑了ActionScript设置,并将我的c:\ lib文件夹添加到了类路径中。然后我给文档一个Uploader的类名并保存了文件。
Next, I created an ActionScript file and added the following code to it:
接下来,我创建了一个ActionScript文件并向其添加了以下代码:
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.
我将此文件保存在FLA旁边,名称为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.
我将SWF发布到我的Asp.NET网站的根目录中。此代码假定您要上传质量为100%的jpeg,并且将接收数据的脚本称为upload.aspx,并且位于站点的根目录中。
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:
在我的网站的根目录中,我创建了一个名为upload.aspx的WebForm。在.aspx文件中,我删除了除page指令之外的所有内容。它的内容看起来像这样:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %>
Then in the CodeBehind, I added the following:
然后在CodeBehind中,我添加了以下内容:
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.
显然存在硬编码值,例如保存路径,但是您应该能够创建所需的任何系统。
#2
1
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.
如果你需要操作图像,只要你可以得到一个byte []或一个POSTed文件的流,你就可以创建它的图像,例如
MemoryStream mstr = new MemoryStream(myByteArray);
Image myImage = Image.FromStream(mstr);
#3
0
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
让他像标准HTML表单一样发布文件。您可以使用以下集合在他发布到的页面的Page_Load事件中访问这些文件
Request.Files
This will return a collection of HttpPostedFiles just like what a FileUpload control does.
这将返回一个HttpPostedFiles集合,就像FileUpload控件一样。