问题
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.
回答1:
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
回答2:
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);
}
}
回答3:
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 :)
回答4:
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
回答5:
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]}});
回答6:
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?
回答7:
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.
来源:https://stackoverflow.com/questions/1098890/as3how-to-change-a-colored-bitmaps-bitmapdata-to-black-and-white