Ladda upp skärmdump till server med POST

 

I denna artikel kommer jag gå igenom hur man kan ta en skärmdump av hela applikationen eller enstaka objekt och sen ladda upp dessa bilder till en server med POST. Jag använder mig av ActionScript 3.0 i Flex (Flash Builder). Denna artikel förutsätter att du redan kan grunderna som flashutvecklare för att kunna följa med.

package se.flashutvecklaren.graphics
{
   import flash.display.BitmapData;
   import flash.display.IBitmapDrawable;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.net.URLRequestMethod;
   import flash.net.URLVariables;
   import flash.utils.ByteArray;

   import mx.graphics.ImageSnapshot;
   import mx.graphics.codec.IImageEncoder;
   import mx.graphics.codec.PNGEncoder;
   import mx.utils.Base64Encoder;

   public class ScreenShotUploader
   {

      private var _saveImageLoader:URLLoader;

      public function ScreenShotUploader()
      {
      }

      public function uploadImage(rSource:IBitmapDrawable):void
      {
         var tBitmapData:BitmapData = ImageSnapshot.captureBitmapData(rSource);

         var tEnc:IImageEncoder = new PNGEncoder();
         var tBA:ByteArray = tEnc.encode(tBitmapData);
         var tB64:Base64Encoder = new Base64Encoder();
         tB64.encodeBytes(tBA);

         var tPath:String = 'my/Path/to/image/receiver';
         var tRequest:URLRequest = new URLRequest(tPath);
         var tVar:URLVariables = new URLVariables();
         tVar.base64 = tB64.toString();
         tRequest.data = tVar;
         tRequest.method = URLRequestMethod.POST;	

         _saveImageLoader = new URLLoader();
         _saveImageLoader.load(tRequest); 
      }
   }
}

I sin enklaste form ser koden ut som ovan. I detta exempel tar funktionen som indata ett objekt som implementerar IbitmapDrawable. Detta är objektet som man vill ladda upp en skärmbild för. Detta kan vara hela applikationen om du vill det eller bara ett utvalt objekt på scenen.

Jag börjar med att anropa den statiska funktionen captureBitmapData() i klassen ImageSnapshot för att fånga en skärmdump. Denna bild kommer som rådata i en BitmapData. Jag väljer att komprimera och koda om datan till PNG-format. Detta gör jag med hjälp av klassen PNGEncoder. Det finns även en motsvarande klass JPEGEncoder om du föredrar att spara skärmdumpen som en JPG-bild. Dock är det bättre prestanda på PNGEncoder så ska du koda om många stora bilder har du tid att vinna på att använda PNGEncoder istället för JPEGEncoder.

För att kunna skicka bilden som ett POST anrop till servern så kodar jag om min binära bilddata med Base64Encoder. Base64 är en metod som används för att koda binär data till 7-bitars ASCII-tecken.

Nu återstår bara att skapa anropet till servern och att exekvera det. Jag skapar en URLRequest, tRequest, och ger den som parameter adressen till skriptet på servern som ska ta emot bilden. Sen skapar jag variablerna som ska skickas med i anropet till servern. I detta fallet har jag bara en variabel som jag döper till base64. Denna sätter till den bilddata som jag kodat om med Base64Encoder. Efter att jag har lagt till variablerna i anropet exekverar jag denna genom att skapa en URLLoader och som jag köra load() på med anropet som parameter.

För att skicka upp en skärmbild för din applikation lägger du bara till nedanstående kod på passande ställe i din applikation. Vill du ladda upp en bild på ett enstaka objekt så byter du ut this mot det objektet istället.

var tSCU:ScreenShotUploader = new ScreenShotUploader();
tSCU.uploadImage(this);

Detta är allt som behövs för att ta en skärmdump och ladda upp den till en server. Självklart måste man även ha ett skript på servern som tar emot informationen. Det är ett uppgift som jag lämnar åt programmerarna på backend.

Fler artiklar om ActionScript 3 för flashutvecklare hittar du här. Är ni på jakt efter en rutinerad flashutvecklare på frilans eller som konsult? Tveka i så fall inte att höra av er till mig här. Vill ni veta mer om vad jag har att erbjuda som frilansande flashutvecklare så kan ni läsa mer här.