Converting bitmap data to byte array and vice versa

If you ever worked with image storage and retrieval in Flex then you must have come across bytearray to bitmap data conversion and vice versa. This article discuss about some inbuilt methods to carry out this conversion.

Converting BitmapData to ByteArray

Simplest way to convert bitmap data to byte array

var bytes:ByteArray = bitmap.getPixels(bitmap.rect);

In this method raw 32 bit pixel data is stored in the ByteArray, without compression, nor the dimensions of the original image.If you want compression then try as3corelib.

Bitmap data to encoded byte array

If you want encoded ByteArray then use Flex inbuilt encoder like (JPGEncoder or PNGEncoder).

var quality:int = 75;
var jpg:JPGEncoder = new JPGEncoder(quality);
var byteArray:ByteArray = jpg.encode(BITMAPDATA);

Converting ByteArray to BitmapData

var bitmap:BitmapData = new BitmapData(width,height)
bitmap.setPixels(Rectangle, BYTES);

For this method you need to know width & height.If you don’t have those data then use the following method

var loader:Loader = new Loader();
loader.loadBytes(BYTES);

Once the loader loads the content (use Event.COMPLETE ) type cast loader.content to BitmapData

var bmp:Bitmap = Bitmap(loader.content);

Undo/Redo Using Memento Pattern

Undo/Redo is one of the most fundamental features of any modern editing tool. One of our recent application too required undo/redo functionality and we analyzed different method before embarking on the final one.

At minimum, an undo/redo mechanism should provide users with the ability to:

  • Unexecute (undo) the last action they just performed
  • Re-execute (redo) the last undone action
  • Undo and redo several recent actions (preferable, but optional)

Undo/Redo can be implemented using the following patterns

  • The Command pattern (used for Multi-level Undo)
  • The Memento pattern

In article we are going to discuss about Memento pattern. Check here for more information about Memento pattern.

Example Program to illustrate Memeto Pattern in ActionScript 3.0

Originator.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package
{
     public class Originator
     {
         private var _state:String;

         public function saveToMemento():Memento
         {
             trace("Originator: Saving to Memento.");
             return new Memento(state);
         }

         public function  restoreFromMemento(memento:Memento):void
         {
             state = memento.getSavedState();
             trace("Originator: State after restoring from  Memento: " + state);
         }

         public function set state(state:String):void
         {
                trace("Originator: Setting state to " + state);
                this._state = state;
         }

         public function get state():String
         {
              return this._state;
          }
     }
}

Memento.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package
{
    public class Memento
    {
       private var state:String;
 
           public function Memento(stateToSave:String)
           {
             state = stateToSave;
           }
       
           public function getSavedState():String
           {
             return state;
           }
      }
}

CareTaker.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package
{
     import mx.collections.ArrayCollection;
   
     public class CareTaker
     {
         private var savedStates:ArrayCollection = new ArrayCollection();

         private function execute():void
         {
             var originator:Originator = new Originator();
             originator.set("State1");
             savedStates.add(originator.saveToMemento());
             originator.set("State2");
             savedStates.add(originator.saveToMemento());
             originator.set("State3");
originator.restoreFromMemento(savedStates.getItemAt(0));
         }
    }
}

Even though we didn’t implement the memento pattern as such but it is terminus a quo for any Undo/Redo implementation.