AS3:How to change a colored Bitmap's BitmapData to black and white?

Question

How can I change the bitmapdata of a coloured Bitmap to Black and White in AS3 ? I'm developing a simple image editor tool for a CMS in flash.

People should be able to switch the colour of the uploaded Bitmap to black and white. I want the bitmapdata itself to change So I can write it to a ByteArray with Adobe's JPGEncoder Class afterwards.

back2dos · Accepted Answer · 2009-07-08T16:19:25.787

28

this would be the most elegant solution i presume (with source being you BitmapData):

const rc:Number = 1/3, gc:Number = 1/3, bc:Number = 1/3;
source.applyFilter(source.bitmapData, source.bitmapData.rect, new Point(), new ColorMatrixFilter([rc, gc, bc, 0, 0,rc, gc, bc, 0, 0, rc, gc, bc, 0, 0, 0, 0, 0, 1, 0]));

with flash.geom::Point and flash.filters::ColorMaxtrixFilter ...

ColorMatrixFilter allows many things, such as hue shifts, colorisation, lightening, darkening and desaturation and so on ... otherwise BitmapData::paletteMap and BitmapData::colorTransform are good complements ...

just wanted to note, that using the following

const rc:Number = 1/3, gc:Number = 1/2, bc:Number = 1/6;

looks a little more natural, since subjectively, #00FF00 is brighter than #FF0000, which in turn is brighter than #0000FF

good luck then ... ;)

greetz

back2dos

edited Jul 08 '09 at 16:19

answered Jul 08 '09 at 16:08

back2dos

15,588
34
50

This is the proper solution, +1. – CookieOfFortune Jul 08 '09 at 21:42
3

I seem to remember that a typical weighting of the colors is 30%, 59% and 11% for R,G and B respectively. Though, as you write the weighting is somewhat subjective, it does have a correlation with the luminance values of the colors iirc. Your weights are slightly off in that regard, but the method is absolutely correct. – Marcus Stade May 04 '10 at 08:05

score 2 · Answer 2 · answered Jul 08 '09 at 15:58

Well, just using getPixel and setPixel, and averaging the colors (I'm sure there may be another way to do this with a filter or something):

for(int i = 0; i < bitmapData.height; i++)
{
    for(int j = 0; j < bitmapData.width; j++)
    {
        var color:uint = bitmapData.getPixel(i, j);
        var red:uint = color & 0xFF0000 >> 16;
        var green:uint = color & 0x00FF00 >> 8;
        var blue:uint = color & 0x0000FF >> 0;
        var bwColor:uitn = red + green + blue / 3;
        bwColor = bwColor << 16 + bwColor << 8 + bwColor; // puts the average in each channel

        bitmapData.setPixel(i, j, bwColor);
    }
}

this will work, but if possible, try to avoid to loop over all the pixels a filter will be way faster since they're native. — grapefrukt, Jul 09 '09 at 06:26

score 2 · Answer 3 · edited Jan 06 '12 at 11:15

2

actually, you can use back2dos 's solution in a much easier way:

const rc:Number = 1/3, gc:Number = 1/3, bc:Number = 1/3;
mc.filters = [ new ColorMatrixFilter([rc, gc, bc, 0, 0,rc, gc, bc, 0, 0, rc, gc, bc, 0, 0, 0, 0, 0, 1, 0]) ];

where mc is the MovieClip or Sprite container where the bitmapdata exists as a visual element. thanks back2dos :)

edited Jan 06 '12 at 11:15

musefan

47,875
21
135
185

answered Jan 06 '12 at 10:50

shachar oz

21
1

score 1 · Answer 4 · answered Jul 09 '09 at 15:30

Thanks Cookie, Copying the original bitmapdata was indeed the easiest solution to restore color.

   function clearColor() {
      colorbmd = new BitmapData(source.width, source.height);
      colorbmd = source.clone();
      //apply filter here    
    }
    function restoreColor() {
      source = colorbmd;
    }

I think once you've converted the image to black and white you can't go back (You lose information during the conversion). You will have to make a copy before you apply the filter. – CookieOfFortune

score 1 · Answer 5 · edited Sep 14 '12 at 12:50

1

I use this snipper:

//Tweens to black and white
TweenLite.to(DisplayObjectYouWantToTween ,1,{colorMatrixFilter:{matrix:[0.3,0.59,0.11,0, 0,0.3,0.59,0.11,0,0,0.3,0.59,0.11,0,0,0,0,0,1,0]}});

//Tween from black and white to Color
TweenLite.to(DisplayObjectYouWantToTween,1,{colorMatrixFilter:{matrix:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}});

edited Sep 14 '12 at 12:50

Sicco

6,167
5
45
61

answered Apr 21 '11 at 19:59

André-Louis

51
1
3

score 0 · Answer 6 · answered Jul 09 '09 at 09:50

0

I tried both methods. Seems like the ColorMatrixFilter method works a lot faster when working with large images.

Is there some method to remove the Filter too? or shoud I change the ColorMatrixFilter values again?

answered Jul 09 '09 at 09:50

Yens

915
4
12
24

1

I think once you've converted the image to black and white you can't go back (You lose information during the conversion). You will have to make a copy before you apply the filter. – CookieOfFortune Jul 09 '09 at 13:35

score 0 · Answer 7 · answered Jan 31 '11 at 15:42

Thank you for the approach, I created a small tool, that lets you play around with the values: http://bjornson.inhb.de/?p=159

The initial values are the ones proposed by macke: 30%, 59% and 11% for rgb.

You can also load external images and try out for the best result for your images.

AS3:How to change a colored Bitmap's BitmapData to black and white?

7 Answers7

Linked