利用ColorMatrixFilter生成灰度图像

一开始觉得AS3的滤镜很难使用，尤其是那些矩阵，让人望而生畏。最近写一个聊天模块，要用到离线状态下的灰色头像，于是认真研究了ColorMatrixFilter，发现其实也没有那么难。所谓的矩阵其实就是一个再普通不过的Array，只要弄懂这个Array各个元素的关系就很容易使用滤镜。

    先发代码，下面再详细介绍。这个程序实现加载一张彩色图像，通过滤镜变成黑白图像之后输出。

view plaincopy to clipboardprint?

1. package { 
2. import flash.display.Bitmap; 
3. import flash.display.Loader; 
4. import flash.display.Sprite; 
5. import flash.events.Event; 
6. import flash.filters.ColorMatrixFilter; 
7. import flash.net.URLRequest; 
9. public class ColorFilterSample extends Sprite 
10.     { 
11. private var loader:Loader; 
12. public function ColorFilterSample() 
13.         { 
14.             loader=new Loader(); 
15.             loader.contentLoaderInfo.addEventListener 
16.                                              (Event.COMPLETE, onComplete); 
17.             loader.load(new URLRequest("hehua.jpg")); 
18.         } 
19. private function onComplete(e:Event):void{ 
20. //加载一张彩色图片
21.             var image:Bitmap=new Bitmap(); 
22.             image=Bitmap(loader.content); 
23. //定义滤镜matrix，一个包含20个项的数组
24.             var matrix:Array=[0.3086, 0.6094, 0.0820, 0, 0, 
25. 0.3086, 0.6094, 0.0820, 0, 0, 
26. 0.3086, 0.6094, 0.0820, 0, 0, 
27. 0,      0,      0,      1, 0]; 
28. //初始化一个ColorMatrixFilter对象(matrix作为参数)
29.             var myfilter:ColorMatrixFilter=new ColorMatrixFilter(matrix); 
30. //将滤镜应用于图片
31.             image.filters=[myfilter]; 
32.             addChild(image); 
33.         } 
34.     } 
35. } 

    首先定义一个matrix数组：一个包含20个浮点数的数组。AS3.0帮助文档中的计算公式是这样的：

redResult     = (a[0]  * srcR) + (a[1]  * srcG) + (a[2]  * srcB) + (a[3]  * srcA) + a[4]
greenResult = (a[5]  * srcR) + (a[6]  * srcG) + (a[7]  * srcB) + (a[8]  * srcA) + a[9]
blueResult    = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14]
alphaResult  = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19]

    上面的公式看起来有点复杂，没关系，再看下面的图示就清晰多了：

                       srcR    srcG     srcB      srcA     offset

redResult       a[0]      a[1]     a[2]      a[3]      a[4]

greenResult   a[5]      a[6]     a[7]      a[8]      a[9]

blueResult     a[10]    a[11]   a[12]    a[13]    a[14]

alphaResult   a[15]    a[16]   a[17]    a[18]    a[19]

    srcR,srcG,srcB,srcA表示原始图像每个像素的RGBA值（关于像素颜色的RGBA值请查阅手册，这里不再展开），redResult,greenResutl,blueResult,alphaResult表示目标图像的RGBA值。上面公式的意思是说：redResult的值是a[0]、a[1]、a[2]、a[3]分别与 srcR,srcG,srcB,srcA相乘，再加上a[4]的总和（a[4]是偏移量）。greenResutl,blueResult,alphaResult以此类推。这样说应该很容易理解了吧？

    好吧，这个公式无非就是说原始图像的像素值，通过和这个数组交叉相乘，得到目标图像的像素值。

    很明显，我们给这个数组定义不同的值，则会得到不同的结果，目标图像的效果也不一样。这里要得到灰度图像应该使用这个数组：

    [0.3086, 0.6094, 0.0820, 0, 0,
     0.3086, 0.6094, 0.0820, 0, 0,
     0.3086, 0.6094, 0.0820, 0, 0,
     0,          0,          0,          1, 0];

    这个数组凭什么得来的呢？应该是某些大师实验得到的吧，百度可以搜索到这方面的专业论述，我这里就说一下大概意思。话说取得原始图像的RGB值，计算得到它们的平均值之后再赋给新的RGB值，这样对每个像素处理之后就得到黑白图像了，或者可以理解成RGB值按照0.33 : 0.33 : 0.33的权值重新分配；后来有些大师研究得到结论：如果RGB值按照0.3086 : 0.6094 : 0.0820的比例分配，得到的灰度图像看起来最顺眼，于是就有了上面的数组！顺便再提一下，这里的alpha值没有改变（那个数字1，你懂的），还有偏移量都为0。

     好了，明白了这个数组之后，将其作为参数传进ColorMatrixFilter的构造函数，生成一个滤镜实例myfilter，再将myfilter添加到图像即可。或许有些童鞋还要问为什么用image.filters=[myfilter]这条语句来添加滤镜？好的，我并不打算好人做到底，童鞋请回家看AS帮助文档吧^_*

作者：flag_and_leg

出处：http://blog.csdn.net/flag_and_leg/archive/2011/05/11/6412945.aspx