Spara bild till användarens dator i Flash ActionScript 3

 

I denna artikel kommer vi att skapa en användbar ActionScript 3.0 klass för att spara bilder från Flash till användarens dator. Denna klass kommer att klara av att ta skärmdumpar av hela applikationen eller av enskilda objekt i applikationen. Vi kommer att använda oss av Flash Builder 4 i exemplen nedan men du kan använda dig av valfri Flash utvecklingsmiljö så länge du har tillgång till Flex SDK med mx biblioteket eftersom denna innehåller klasser vi behöver. Vi använder oss av metoden save() som finns i klassen FileReference vilket gör att vi måste inrikta oss på Flash Player 10 eller senare.

/**
 * @author: Andreas
 * @created: Aug 13, 2010
 * @copyright: Flashutvecklaren.se All rights reserved.
 */
package se.flashutvecklaren.bitmap
{
   import flash.display.BitmapData;
   import flash.display.DisplayObject;
   import flash.net.FileReference;
   import flash.utils.ByteArray;
   
   import mx.graphics.codec.IImageEncoder;
   import mx.graphics.codec.JPEGEncoder;
   import mx.graphics.codec.PNGEncoder;
   /**
    *  Class for saving an image of a DisplayObject to the users file system.
    *  The image can be saved using PNG or JPG compression.
    */
   public class BitmapSaver
   {
      /**
       *  Constructor.
       */
      public function BitmapSaver()
      {
      }
      /**
       *  Saves an images of a DisplayObject as a PNG file on the users filesystem.
       *  @param rSource the DisplayObject to save an image of
       *  @see #saveJPG() 
       */
      public function savePNG(rSource:DisplayObject):void
      {
         save(rSource, new PNGEncoder(), '.png');
      }
      /**
       *  Saves an images of a DisplayObject as a JPG file on the users filesystem.
       *  @param rSource the DisplayObject to save an image of
       *  @param rQuality a value between 0.0 and 100.0. The smaller the quality value, the smaller the file size of the resultant image. The default value is 50.0.
       *  @see #savePNG()
       */
      public function saveJPG(rSource:DisplayObject, rQuality:Number = 50.0):void
      {
         save(rSource, new JPEGEncoder(rQuality), '.jpg');
      }
      /**
       *  @private
       *  Used for capturing and saving the image
       */
      protected function save(rSource:DisplayObject, rEncoder:IImageEncoder, rDefaultFileName:String):void
      {
         var tBD:BitmapData = new BitmapData(rSource.width, rSource.height);
         tBD.draw(rSource);
         var tBA:ByteArray = rEncoder.encode(tBD);
         var tFR:FileReference = new FileReference();
         tFR.save(tBA, rDefaultFileName);
         tBD.dispose();
         tBA.clear();
      }
   }
}

Vår klass har två olika metoder för att spara bilder. En sparar bilder med PNG komprimering, savePNG(), och den andra använder JPG komprimering, saveJPG(). Om du har möjlighet att själv välja format så rekommenderar jag att du använder dig av PNG då denna komprimering går mycket snabbare att exekvera i Flash jämfört med JPG. Båda metoderna tar en parameter, rSource, som anger vilket DisplayObject som det ska sparas en avbild av på användarens dator. Vi kan använda oss alla DisplayObjekt som finns i applikationen inklusive applikationen själv. Metoden saveJPG har även en andra parameter, rQuality, som anger komprimeringsgraden.

Allt du behöver göra för att spara en bild på användarens dator är skapa en instans av klassen BitmapSaver och anropa en av metoderna med ett DisplayObject som parameter.

var tBS:BitmapSaver = new BitmapSaver();
tBS.savePNG(displayObjectToBeSaved);

En sak att hålla på minnet är att Flash bara tillåter att du försöker spara bilder när användaren själv triggar händelsen genom att tex klicka på en knapp eller trycka på en tangent. Det är alltså inte möjligt för oss flashutvecklare att försöka spara en fil till användarens dator utan att användaren själv initierar det. När filen ska sparas öppnas ett dialogfönster där användaren kan välja ett filnamn och var i sitt filsystem han vill spara bilden. Textfältet kommer att innehålla rätt filändelse när det öppnas.

Nu skapar vi en liten applikation för att testa vår klass. Applikation rita ut en röd rektangel och placerar ut en knapp så att vi kan trigga att applikationen sparar bilden. Vi sparar bilden som en PNG till det lokala filsystemet. Du kan själv enkelt ändra till att spara som JPG om du vill det.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               width="200" height="130">
	
   <s:layout>
      <s:VerticalLayout />
   </s:layout>

   <fx:Script>
      <![CDATA[
         import se.flashutvecklaren.bitmap.BitmapSaver;
         protected function saveImg():void
         {
            var tBS:BitmapSaver = new BitmapSaver();
            tBS.savePNG(this);
         }
      ]]>
   </fx:Script>
	
   <s:Rect width="100" height="100">
      <s:fill>
         <s:SolidColor color="0xff0000" />
      </s:fill>
   </s:Rect>
	
   <s:Button click="saveImg()" label="Save" />
	
</s:Application>

Du kan testa applikationen nedan. Klicka på knappen märkt Save för att spara en skärmdump av Flexapplikationen på din dator.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Svårare än så var det inte. Jag hoppas att du får nytta av min klass för att spara bilder i Flash. Är du intresserad av att läsa någon av mina andra guider för flashutvecklare så hittar du dem här.

Söker du efter en frilansande flashutvecklare eller flash konsult? I så fall kan du kontakta mig här. Vill ni veta mer om vad jag har att erbjuda som frilansande flashutvecklare så kan ni läsa mer här.