Jozef Chúťka's blog » BitmapData

A Sound In Image Experiment

Jozef Chúťka — Tue, 25 Oct 2011 09:58:45 +0000

There are some usefull apis since Flash Player 10, I have never been playing with. Yesterday, I realized one experiment with Sound + SampleDataEvent and created quick demo for converting music into a bitmap and vice versa.

There is a Sound.extract() method in ActionScript allowing you to grab raw sound data from a sound object. It provides you ByteArray of 32-bit floating-point values, which can be converted to a Number using ByteArray.readFloat(). The resulting values are -1 < value < 1...

I tried to add and multiply the Number to get unsigned integer and it appeared that only first 16 bytes are changing while the rest 16 remains unused (0xffff). I did not get any further to investigate if it is related to the type conversion or its a limitation of Sound api. While for BitmapData you provide 32 values (unsigned integers) and the converted sound value use only 16, next 16 bites can store additional sound value. That perfectly fits for left + right channel. BitmapData handles 32-bit ARGB values. In my case, left channel will occupy first AR, right channel GB values, so please do not expect the result to be Mona Lisa portrait, but rather it is a chaotic (noise like) color and alpha result. Following image contains 5 seconds of Vivaldi:

If you are able match image width with music rythm, some more interesting result may appear. And here is the demo player:

Sound In Image – wonderfl build flash online

There is a lot of commented code in the demo, feel free to uncomment for generating images from your mp3s.

Some quick math about image size vs. music length:

in sound, the audio data is always exposed as 44100 Hz stereo
so there is 88200 32-bit floating-point values per second (left + right channel)
two values can be stored in a pixel, that results in 44100 pixels per second
that means you can store almost 18 seconds in 1024×768 ARGB image

It would be nice to see how can image compression, watermark etc. affect the resulting sound/size. Or how would some image filters affect the resulting sound… A lot of experiments ahead

Quick Tip: OSMF VideoPlayer Screenshot

Jozef Chúťka — Tue, 20 Sep 2011 08:23:02 +0000

Your video is usualy resized and played in a custom sized rectangle, but if you need to capture the fullscreen screenshot you may be tempted to gather the original size screenshot by resizing the whole component or its part. Its not the best practice, while you need to resize and move back and forth the component etc. Here is a quick tip to make a fullsize screenshot from spark osmf based VideoPlayer using Matrix.

Remember, you need a correct crossdomain policy to access video bitmapData.

Processing BitmapData.getPixels() With PHP

Jozef Chúťka — Mon, 25 Oct 2010 11:35:41 +0000

Have you ever worked with BitmapData.getPixels() method? This method generates a byte array from a rectangular region of pixel data. Writes an unsigned integer (a 32-bit unmultiplied pixel value) for each pixel into the byte array. Thats sounds good, but what is it good for to have a ByteArray full of integers? There is not even a decoder for this format on my backend?!… Well, this format is so cool, and easy to access that you do are able to write your own decoder e.g. in PHP.

The resulting bytes are 32-bit unsigned integers for each pixel represented by AARRGGBB format, followed by another pixels and so on e.g.:

AA RR GG BB:
-- -- -- --
FF FF 00 00
00 00 FF 00

First pixel is full opaque red color, second pixel is full transparent green color. That sounds good enough to use with imagesetpixel(), that requires color in almost identic format, however PHP GD library recognizes alpha values from 0 to 127 in reversed logic (127 full transparent, 0 full opaque). So we only need to change the alpha value and we are good to go:

AA -> AA (php)
--    --
FF -> 00
00 -> 7F

What are we going to do is:

this format does not know about width and height of image, we have to define it manualy
access pixels (unsigned integers) from byte array (unpack() is the fastest method for this in PHP i guess)
iterate over each pixel / color
get color value and transform to PHP alpha logic
- $color>>24 returns alpha value (0-255), what we need is to divide it by two (0-127 for php) so $color>>25 works fine
- inversed logic requires values to be changed from 0-127 to 127-0: 0x7f-AA
- shift alpha value back to its correct position AA<<24
- add original RRGGBB values to our new alpha AA|($color&0xffffff)
pass transformed color value into imagesetpixel() with correct x, y coordinate

This process should return correct image identifier. Lets have a new PHP function imagecreatefrombmdstring()

>25)<<24)|($color&0xffffff));
		if(++$x==$width)
		{
			$x=0;
			$y++;
		}
	}
	return $img;
}

The ActionScript code may look something like this, this method is in fact very fast on client side:

var bitmapData:BitmapData = ...
var bytes:Bytes=bitmapData.getPixels(bitmapData.rect);
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest();
request.url = "our.php";
request.contentType = "application/octet-stream";
request.method = URLRequestMethod.POST;
request.data = bytes;
loader.load(request);

To optimize it even more, use ByteArray.compress() to compress bytes before sending, now you should get binary request not much bigger than length of the same request containing PNG encoded image bytes. On PHP side use gzuncompress() to get raw bytes.

Why did I developer/used this method of sending image to server? Well, I was not able to find fast enought/asynchronous PNG encoder. By using this technique, I was able to scale the getPixels+compress process into multiple frames (asynchronously) in order to create smooth upload process (using MultipartURLLoader).

Pixel Bender Disco

Jozef Chúťka — Thu, 18 Feb 2010 11:24:09 +0000

While playing with pixel bender, I created some simple sahders that when combined, reminds me of winamp visualizations effects. Feel free to use any in your own projects.

Click and drag mouse to make some disco effects. (wait while page header flash finishes loading so it runs smoothly)




 w) ? 0 : (lineX + 15);
        container.graphics.moveTo(lineX - 15, h / 3 * 2);
        container.graphics.lineTo(lineX, h / 3 * 2);
    }

    private function addRotation(bitmapData:BitmapData, rotation:Number):void
    {
        rotationTime = new Date().time;
        ROTATION_SHADER.data.src.input = bitmapData;
        ROTATION_SHADER.data.src.width = w;
        ROTATION_SHADER.data.src.height = h;
        ROTATION_SHADER.data.rotation.value = [rotation];
        ROTATION_SHADER.data.tx.value = [w / 2];
        ROTATION_SHADER.data.ty.value = [h / 2];

        var job:ShaderJob = new ShaderJob(ROTATION_SHADER, bitmapData);
        job.start(true);
        rotationTime = new Date().time - rotationTime;
    }

    private function addBlur(bitmapData:BitmapData):void
    {
        blurTime = new Date().time;
        BLUR_SHADER.data.src.input = bitmapData;
        BLUR_SHADER.data.src.width = w;
        BLUR_SHADER.data.src.height = h;

        var job:ShaderJob = new ShaderJob(BLUR_SHADER, bitmapData);
        job.start(true);
        blurTime = new Date().time - blurTime;
    }

    private function addColorize(bitmapData:BitmapData, color:uint):void
    {
        colorizeTime = new Date().time;
        var r:Number = ((color >> 16) & 0xFF) / 0xFF - 0.5;
        var g:Number = ((color >>  & 0xFF) / 0xFF - 0.5;
        var b:Number = (color & 0xFF) / 0xFF - 0.5;

        COLORIZE_SHADER.data.src.input = bitmapData;
        COLORIZE_SHADER.data.src.width = w;
        COLORIZE_SHADER.data.src.height = h;
        COLORIZE_SHADER.data.color.value = [r / 40, g / 40, b / 40];

        var job:ShaderJob = new ShaderJob(COLORIZE_SHADER, bitmapData);
        job.start(true);
        colorizeTime = new Date().time - colorizeTime;
    }

    private function addTwirl(bitmapData:BitmapData, angle:Number,
        center:Point, radius:Number):void
    {
        twirlTime = new Date().time;
        TWIRL_SHADER.data.oImage.input = bitmapData;
        TWIRL_SHADER.data.oImage.width = w;
        TWIRL_SHADER.data.oImage.height = h;
        TWIRL_SHADER.data.radius.value = [radius];
        TWIRL_SHADER.data.center.value = [center.x, center.y];
        TWIRL_SHADER.data.twirlAngle.value = [angle];

        var job:ShaderJob = new ShaderJob(TWIRL_SHADER, bitmapData);
        job.start(true);
        twirlTime = new Date().time - twirlTime;
    }
]]>

Rotation pixel bender



kernel RotationFilter
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Image rotation over transform point";
>
{
	input image4 src;
	output pixel4 dst;

	parameter float tx
	<
		minValue: float(0.0);
		maxValue: float(4096.0);
		defaultValue: float(0.0);
		description: "The amount of movement along the x axis to the right, in pixels.";
	>;

	parameter float ty
	<
		minValue: float(0.0);
		maxValue: float(4096.0);
		defaultValue: float(0.0);
		description: "The amount of movement down along the y axis, in pixels.";
	>;

	parameter float rotation
	<
		minValue: float(0.0);
		maxValue: float(4096.0);
		defaultValue: float(0.0);
		description: "Rotation in radians";
	>;

	void evaluatePixel()
	{
		float2 pos = outCoord();
		float rc = cos(rotation);
		float rs = sin(rotation);
		float dx = pos.x - tx;
		float dy = pos.y - ty;
		dst = sampleNearest(src, float2(
			tx + rc * dx + rs * dy,
			ty + rc * dy - rs * dx));
	}
}

Blur pixel bender



kernel BlurFilter
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Simple blur";
>
{
	input image4 src;
	output pixel4 dst;

	void evaluatePixel()
	{
		float2 pos = outCoord();

		dst = 1.0 / 9.0 * (
			sampleNearest(src, pos - float2(-1.0, -1.0))
			+ sampleNearest(src, pos - float2(0.0, -1.0))
			+ sampleNearest(src, pos - float2(1.0, -1.0))
			+ sampleNearest(src, pos - float2(-1.0, 0.0))
			+ sampleNearest(src, pos - float2(0.0, 0.0))
			+ sampleNearest(src, pos - float2(1.0, 0.0))
			+ sampleNearest(src, pos - float2(-1.0, 1.0))
			+ sampleNearest(src, pos - float2(0.0, 1.0))
			+ sampleNearest(src, pos - float2(1.0, 1.0)));
	}
}

Colorize pixel bender



kernel ColorizeFilter
<
	namespace : "sk.yoz";
	vendor : "Yoz";
	version : 1;
	description : "Simple colorize";
>
{
	input image4 src;
	output pixel4 dst;

	parameter float3 color
	<
		minValue: float3(-1.0, -1.0, -1.0);
		maxValue: float3(1.0, 1.0, 1.0);
		defaultValue: float3(0.0, 0.0, 0.0);
		description: "Color";
	>;

	void evaluatePixel()
	{
		dst = sampleNearest(src, outCoord());
		dst.r += color.r;
		dst.g += color.g;
		dst.b += color.b;
	}
}

Twirl pixel bender effect is available for download here

SmoothImage Class (update)

Jozef Chúťka — Wed, 27 Jan 2010 15:54:28 +0000

While Flex uses bilinear resizing method when scaling images (event for Bitmap.smoothing() method), you won’t be able to get nice results when downscaling more than 2 times. Inspired by ImageResizer class I have also created SmoothImage Class. This object extends mx.Image and uses ImageResizer.bilinearIterative() class in order to generate smoother resized results.

In following example mx.Image, SmoothImage and sk.yoz.image.SmoothImage used to demonstrate resizing original 1024x679px image.

sk.yoz.image.SmoothImage class:

package sk.yoz.image
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Point;

    import mx.controls.Image;

    import sk.yoz.math.ResizeMath;

    public class SmoothImage extends Image
    {
        protected var _resizeFunction:String = "bilinearIterative";
        protected var _iterationMultiplier:Number = 2;
        protected var resizedBitmap:Bitmap;

        public function SmoothImage()
        {
            super();
        }

        [Bindable(event="resizeFunctionChanged")]
        [Inspectable(category="Other", defaultValue="bilinearIterative",
            enumeration="bilinear,bilinearIterative")]
        public function set resizeFunction(value:String):void
        {
            if(value == resizeFunction)
                return;
            _resizeFunction = value;
            resizeBitmap();
        }

        public function get resizeFunction():String
        {
            return _resizeFunction;
        }

        [Bindable(event="iterationMultiplierChanged")]
        public function set iterationMultiplier(value:Number):void
        {
            if(value == iterationMultiplier)
                return;

            _iterationMultiplier = value;
            resizeBitmap();
        }

        public function get iterationMultiplier():Number
        {
            return _iterationMultiplier;
        }

        override protected function updateDisplayList(unscaledWidth:Number,
            unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            resizeBitmap();
        }

        protected function resizeBitmap(... rest):void
        {
            if(!width || !height || !content)
                return;

            if(resizedBitmap && resizedBitmap.parent)
                resizedBitmap.parent.removeChild(resizedBitmap);

            resizedBitmap = new Bitmap(resizedBitmapData);
            addChild(resizedBitmap);
            content.visible = false;
        }

        protected function get resizeMethod():String
        {
            return maintainAspectRatio ? ResizeMath.METHOD_LETTERBOX
                : ResizeMath.METHOD_RAW;
        }

        protected function get resizedBitmapData():BitmapData
        {
            var bitmapData:BitmapData;

            if(content is Bitmap)
            {
                bitmapData = Bitmap(content).bitmapData
            }
            else
            {
                bitmapData = new BitmapData(content.width / content.scaleX,
                    content.height / content.scaleY, true, 0);
                bitmapData.draw(content);
            }

            var dimensions:Point = ResizeMath.newDimensions(
                new Point(bitmapData.width, bitmapData.height),
                new Point(width, height), resizeMethod, true);

            return ImageResizer[resizeFunction](bitmapData, dimensions.x,
                dimensions.y, resizeMethod, true, iterationMultiplier);
        }
    }
}

Update (Jan 27, 2010): in sk.yoz.image.SmoothImage

Update (Jun 14, 2010): in sk.yoz.image.SmoothImage

How to resize an image with ActionScript (update)

Jozef Chúťka — Fri, 08 Jan 2010 12:31:43 +0000

If you need to resize an image on client side, I mean real bitmapData resize (not just showing scaled), feel free to use ImageResizer class. This class takes bitmapData of source image, new width and height and resize method (defined by ResizeMath class), and returns new bitmapData of resized image.

Update: It seems that bitmapData.draw() method uses bilinear algorithm when scaling via Matrix. Bilinear algorithm gives you fine results when downscaling no more than 2 times (400px -> 200px). So, I added bilinearIterative() method into ImageResizer class that creates resized bitmapData by multiple steps achieving much smoother results!

Source of sk.yoz.image.ImageResizer class:

package sk.yoz.image
{
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Point;

    import sk.yoz.math.ResizeMath;

    public class ImageResizer extends Object
    {
        public function ImageResizer()
        {
        }

        public static function bilinear(source:BitmapData, width:uint,
            height:uint, method:String, allowEnlarging:Boolean=true):BitmapData
        {
            var scale:Point = ResizeMath.scale(
                new Point(source.width, source.height),
                new Point(width, height), method, allowEnlarging);
            var result:BitmapData = new BitmapData(width, height, true, 0x0);
            var matrix:Matrix = new Matrix();
            matrix.scale(scale.x, scale.y);
            matrix.tx = (width - source.width * scale.x) / 2;
            matrix.ty = (height - source.height * scale.y) / 2;
            result.draw(source, matrix, null, null, null, true);
            return result;
        }

        public static function bilinearIterative(source:BitmapData, width:uint,
            height:uint, method:String, allowEnlarging:Boolean = true,
            iterationMultiplier:Number = 2):BitmapData
        {
            var w:uint = source.width;
            var h:uint = source.height;
            var result:BitmapData;
            while(!result || w != width || h != height)
            {
                w = source.width > width
                    ? Math.max(w / iterationMultiplier, width)
                    : Math.min(w * iterationMultiplier, width);
                h = source.height > height
                    ? Math.max(h / iterationMultiplier, height)
                    : Math.min(h * iterationMultiplier, height);
                result = bilinear(result || source, w, h, method,
                    allowEnlarging);
            }
            return result;
        }
    }
}

Usage is pretty simple. You also gonna need sk.yoz.math.ResizeMath class.

var result:BitmapData = ImageResizer.bilinearIterative(sourceBitmapData, 100, 100,
    ResizeMath.METHOD_PAN_AND_SCAN);

Alternatives & Benchmarking

There are also another possible methods to resize/resample images. Read more about bilinear resampling and bicubic resampling methods using pixel bender. I benchamrked all methods and here are the results:

source    | result  | ImageResizer | ImageResizer        | Bilinear PB | Bicubic PB
          |         | bilinear()   | bilinearIterative() |             |
4x4       | 200x200 |         0 ms |                3 ms |       16 ms |      31 ms
946x946   | 200x200 |         0 ms |                7 ms |       16 ms |      47 ms
1200x1200 | 200x200 |         0 ms |                9 ms |       32 ms |      47 ms

Comparing ImageResizer.bilinear() method with bilinear and bicubic pixel bender resizing. Even though, all methods are pretty fast, the results are far from beeing as good as Lanczos algorithm results (e.g. used in IrfanView):

Comparing ImageResizer.bilinear(), ImageResizer.bilinearIterative() and Lanczos algorithm:

If you are looking for transformation between BitmapData, Bitmap, ByteArray, read this article.

Update November 10, 2010: Lanczos Resampling With ActionScript

Frame rate optimization

Jozef Chúťka — Sun, 08 Nov 2009 15:05:49 +0000

There has been a lot of articles written about how to optimize your flash / flex application frameRate. In most cases, you only need to have full frameRate when some animation is playing, or tweening etc., in other words when some visual changes are going on. FrameRateOptimizator class does exactly what you need. In default, it uses full frameRate when visual changes and when it stops, optimizator automatically switches to lower frameRate. Optimizator uses bitmapData to compare last state with actual state to catch any visual changes. By default snapshot is executed two times per second in low frameRate (inactive state), or one time per second in full frameRate state (active state), taking approximately not more than 10ms per execution (fast enough).

sk.yoz.optimization.FrameRateOptimizator
Application

FrameRateOptimizator.as

package sk.yoz.optimization
{
    import flash.display.BitmapData;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.MouseEvent;
    import flash.events.TimerEvent;
    import flash.geom.Matrix;
    import flash.utils.Timer;

    public class FrameRateOptimizator extends EventDispatcher
    {
        public var frameRateActive:uint = 24;
        public var frameRateInactive:uint = 2;

        protected var snapshot:BitmapData;

        protected var fpsp:uint;
        protected var _fps:uint;
        protected var fpsTimer:Timer;

        protected var root:DisplayObject;
        protected var _forceActive:Boolean = false;
        protected var _forceInactive:Boolean = false;
        protected var _mouseMoveActivation:Boolean = false;
        protected var _samplingScale:Number = 1;
        protected var samplingMatrix:Matrix = new Matrix();

        protected var samplingPeriod:uint = 1000;
        protected var activityTimer:Timer;

        public var debug:Boolean = false;

        public function FrameRateOptimizator(root:DisplayObject,
            frameRateActive:uint = 24, frameRateInactive:uint = 2,
            samplingPeriod:uint = 1000, mouseMoveActivation:Boolean = false,
            samplingScale:Number = 1):void
        {
            super();

            this.root = root;
            this.frameRateActive = frameRateActive;
            this.frameRateInactive = frameRateInactive;
            this.samplingPeriod = samplingPeriod;
            this.mouseMoveActivation = mouseMoveActivation;
            this.samplingScale = samplingScale;

            root.addEventListener(Event.ENTER_FRAME, rootEnterFrame);

            fpsTimer = new Timer(1000);
            fpsTimer.addEventListener(TimerEvent.TIMER, fpsTimerHandler);
            fpsTimer.start();

            var type:String = TimerEvent.TIMER_COMPLETE;
            activityTimer = new Timer(samplingPeriod, 1);
            activityTimer.addEventListener(type, activityTimerComplete);

            isActive = true;
        }

        [Bindable(event="fpsChanged")]
        public function get fps():uint
        {
            return _fps;
        }

        protected function set fps(value:uint):void
        {
            if(_fps == value)
                return;
            _fps = value;
            dispatchEvent(new Event("fpsChanged"));
        }

        public function set forceActive(value:Boolean):void
        {
            _forceActive = value;
            if(forceActive)
                isActive = true;
        }

        public function get forceActive():Boolean
        {
            return _forceActive;
        }

        public function set forceInactive(value:Boolean):void
        {
            _forceInactive = value;
            if(forceInactive)
                isActive = false;
        }

        public function get forceInactive():Boolean
        {
            return _forceInactive;
        }

        public function set mouseMoveActivation(value:Boolean):void
        {
            if(value == _mouseMoveActivation)
                return;
            _mouseMoveActivation = value;
            if(value)
                root.addEventListener(MouseEvent.MOUSE_MOVE, rootMouseMove);
            else
                root.removeEventListener(MouseEvent.MOUSE_MOVE, rootMouseMove);
        }

        public function get mouseMoveActivation():Boolean
        {
            return _mouseMoveActivation;
        }

        public function set isActive(value:Boolean):void
        {
            if(value && !forceActive && !forceInactive)
            {
                activityTimer.reset();
                activityTimer.start();
            }
            frameRate = suggestFrameRate(value);
        }

        public function set samplingScale(value:Number):void
        {
            _samplingScale = value;
            samplingMatrix = new Matrix();
            samplingMatrix.scale(value, value);
        }

        public function get samplingScale():Number
        {
            return _samplingScale;
        }

        protected function suggestFrameRate(active:Boolean):uint
        {
            if(forceActive)
                return frameRateActive;
            if(forceInactive)
                return frameRateInactive;
            return active ? frameRateActive : frameRateInactive;
        }

        protected function set frameRate(value:uint):void
        {
            if(value == frameRate)
                return;
            root.stage.frameRate = value;
            if(debug)
                trace("FrameRateOptimizator -> frameRate = " + value);
        }

        protected function get frameRate():uint
        {
            return root.stage.frameRate;
        }

        public function get isActive():Boolean
        {
            return frameRate == frameRateActive;
        }

        protected function rootEnterFrame(event:Event):void
        {
            fpsp++;
            if(!isActive && rootChanged)
                isActive = true;
        }

        protected function rootMouseMove(event:MouseEvent):void
        {
            isActive = true;
        }

        protected function get rootChanged():Boolean
        {
            var changed:Boolean = true;
            var bitmapData:BitmapData;
            try
            {
                var d0:Date = new Date();
                bitmapData = new BitmapData(
                    root.width * samplingScale, root.height * samplingScale);
                bitmapData.draw(root, samplingMatrix);
                if(snapshot)
                    changed = bitmapData.compare(snapshot) != 0;
                snapshot = bitmapData;
                trace(new Date().time - d0.time, "ms")
            }
            catch(error:Error)
            {
                snapshot = null;
                if(debug)
                    trace("FrameRateOptimizator Error: " + error.message);
            }
            return changed;
        }

        protected function fpsTimerHandler(event:TimerEvent):void
        {
            protected::fps = fpsp;
            fpsp = 0;
        }

        protected function activityTimerComplete(event:TimerEvent):void
        {
            isActive = rootChanged;
        }
    }
}

Application

Export code in debug mode and watch how frameRate changes (in trace console) when playing with slider. Try (un)comment mouseMoveActivation and see the difference.

Optimizer will not work if application contains any source object and (in the case of a Sprite or MovieClip object) all of its child objects do not come from the same domain as the caller, or are not in a content that is accessible to the caller by having called the Security.allowDomain() method. Read more about BitmapData.draw() SecurityError.

Bitmap, BitmapData, ByteArray…

Jozef Chúťka — Thu, 15 Oct 2009 12:26:40 +0000

Lets see how to convert between Bitmap, BitmapData and ByteArray in few examples:

DisplayObject to BitmapData
BitmapData to Bitmap
BitmapData to ByteArray
URL (image) to ByteArray (asynchronous)
URL (image) to BitmapData (asynchronous)
ByteArray to BitmapData (asynchronous)

DisplayObject to BitmapData. FYI DisplayObject is any visible object in flash (Sprite, MovieClip, Bitmap, UIComponent, Video etc…):

import flash.display.BitmapData;
var bitmapData:BitmapData = new BitmapData(button.width, button.height, false, 0xFFFFFF);
bitmapData.draw(button);
// result: bitmapData

BitmapData to Bitmap:

import flash.display.Bitmap;
var bitmap:Bitmap = new Bitmap(bitmapData);
// result: bitmap

BitmapData to ByteArray. Requires jpeg / png or any other encoder. Read more about JPEG encoding here:

import mx.graphics.codec.JPEGEncoder;
import flash.utils.ByteArray;
var encoder:JPEGEncoder = new JPEGEncoder(90);
var byteArray:ByteArray = encoder.encode(bitmapData));
// result: byteArray

URL (image) to ByteArray. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.utils.ByteArray;

var loader:Loader = new Loader();
loader.load(new URLRequest("banner1.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var byteArray:ByteArray = loaderInfo.bytes;
    // result: byteArray
}

URL (image) to BitmapData. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.BitmapData;

var loader:Loader = new Loader();
loader.load(new URLRequest("banner1.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);
    // result: bitmapData
}

ByteArray to BitmapData. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.display.BitmapData;

var loader:Loader = new Loader();
loader.loadBytes(byteArray);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);
    // result: bitmapData
}

Synchronous JPEG ByteArray to BitmapData can be found here

ActionScript 3 encoding JPEG, alchemy

Jozef Chúťka — Fri, 09 Oct 2009 11:53:05 +0000

Lets assume you want to save an image (or any DisplayObject) from flash to disk, or upload to facebook etc. What you need is to encode your BitmapData into an Jpeg and send ByteArray raw data to be saved/uploaded. There are few ways how to do it.

First, you can use original adobe mx.graphics.codec.JPEGEncoder. Sadly, this encoder is the slowest. There were attemps to make it faster by otpimizing code by bytearray.org, that resulted into two times faster org.bytearray.images.JPEGEncoder. Usage is pretty simple:

import org.bytearray.JPEGEncoder;

function encode():ByteArray
{
    var bitmapData:BitmapData = new BitmapData(this.width, this.height, false);
    bitmapData.draw(this);
    var encoder:JPEGEncoder = new JPEGEncoder(80);
    return encoder.encode(bitmapData);
}

But not fast enough . Since Flash Player 10 introduced alchemy (compiled C and C++ code within flash apps), it was possible to use optimized C++ encoder to do the work. Encoding time is more than 30 times faster than the original JPEGEncoder, pretty cool huh? Code looks like this

import cmodule.jpegencoder.CLibInit;

function encode():ByteArray
{
    var bitmapData:BitmapData = new BitmapData(this.width, this.height, false);
    bitmapData.draw(this);
    var init:CLibInit = new CLibInit();
    var lib:Object = init.init();
    var byteArray:ByteArray = new ByteArray();
    var byteArrayOut:ByteArray = new ByteArray();
    byteArray = bitmapData.getPixels(bitmapData.rect);
    byteArray.position = 0;
    lib.encode(byteArray, byteArrayOut, bitmapData.width, bitmapData.height, 80);
    return byteArrayOut;
}

You can also run your encoding in asynchronous mode… Read more and see tests here: