StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <code>DisplayObject</code> into a <code>BitmapData</code> object and as such, you can easily replace the reference to the button with anything that inherits from <code>DisplayObject</code> (including a movie clip that contains the canvas for a paint application etc).</p> <p>I’ll walk you through the Flash element first and then the .NET backend.</p> <p><strong>Flash</strong></p> <p>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 <a href="http://code.google.com/p/as3corelib/" rel="nofollow noreferrer">http://code.google.com/p/as3corelib/</a>. We’ll also need a base64 encoder for sending the data over the wire. I’ll use the one from Dynamic Flash, available at <a href="http://dynamicflash.com/goodies/base64/" rel="nofollow noreferrer">http://dynamicflash.com/goodies/base64/</a>. </p> <p>Download these and extract them somewhere sensible on your hard disk (like a C:\lib folder).</p> <p>I created a new AS3 Flash file and saved it as <em>uploader.fla</em>. I added a button component to the stage and named it <em>btnUpload</em>. Next I edited the ActionScript settings and added my <em>c:\lib</em> folder to the classpath. Then I gave the document a class name of <em>Uploader</em> and saved the file.</p> <p>Next, I created an ActionScript file and added the following code to it:</p> <pre><code>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); } } } </code></pre> <p>I saved this file next to the FLA with the name <em>Uploader.as</em>.</p> <p>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.</p> <p><strong>ASP.NET</strong></p> <p>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:</p> <pre><code><%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="upload" %> </code></pre> <p>Then in the CodeBehind, I added the following:</p> <pre><code>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"); } } </code></pre> <p>There are obviously hard-coded values such as the save path but from this you should be able to create whatever system you require.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload