Avg. Rating 3.8

Problem

As most of you know Flex/Air only supports loading content as png, gif, jpg and swf and doesn't allow you to read BMP image format.

Solution

Here I will show you how to read byte by byte and display a window bmp image format by decoding and passing values to the bitmap data object to display the image

Detailed explanation

Sections

  • Understanding BMP format (24 and 32 bits)
  • Performance
  • How to use it
  • About the Author

Understanding BMP format 16(555 and 565), 24 and 32 bits
Usually, the bmp image format has a structure subdivided in several blocks like in the example:
 
        BitmapFileHeader
             Type       19778     
             Size       XXXX
             Reserved1 0
             Reserved2 0
             OffsetBits 54
        BitmapInfoHeader
             Size            40
             Width           XXX
             Height          XXX
             Planes          1
             BitCount        X
             Compression     0
             SizeImage       XXXX
             XPelsPerMeter   0
             YPelsPerMeter   0
             ColorsUsed      16
             ColorsImportant 16
        Palette table if any

        Body (e.g. 32 bits body image)
                  Blue Green Red Alpha
[00000000]        84    252    84   0
[00000001]        252   252    84   0
[00000002]        84    84     252 0
[00000003]        252   84     252 0
[00000004]        84    252    252 0
[00000005]        252   252    252 0
[00000006]        0     0      0    0
etc. etc.


In the header there is basically what you need to know in terms of image size, compression and body image position and it is basically what you really need to know.
Two differences you should keep in mind for 24 and 32 bits are basically these:

  1.     24bit has a junk byte and is written backward from the bottom to the top, right to left.
  2.     32bit doesn’t have junk bytes but a byte dedicated to the Alpha and it is written forward from the top to the bottom, left to right.

A quick formula to show and calculate the junk byte:4 - ((WIDTH * 3) % 4);
Basically the X bytes of the rows must be skipped to read the image properly.


16Bits (555 and 565 encoding)
Two bytes are used to describe RGB colors and this table describe how to represent each color


How to retrieve the colors:
Mask and shift each color with these values.
The mask values are also described in the bitmap table.

 5-6-5 - 16

  • F800 - 63488 - 1111100000000000 
  • 07E0 - 2016   - 0000011111100000 
  • 001F - 31        - 0000000000011111 

 5-5-5 - 15

  • 7C00 - 31744 - 111110000000000  
  • 03E0 - 992      - 000001111100000  
  • 001F - 31        - 000000000011111   



Performance
Most of the images are read quickly unless you have to load a 9Mb image 2048x1536 it will take approximately 4 seconds, which is not bad.
 
How to use it

  1.       Add the package to your project
  2.       Add and image container on the screen
  3.      var image1:BmpReader=new BmpReader;
          imageObjectOnScreen.addChild(image1.BmpReaderEx(“MyPicture.bmp”));

About the author


http://rosarioconti.wordpress.com
 

BmpReader.htm.zip
BMPDatav2.zip
[Download the Zip package or the htm version.]
Report abuse

Related recipes