AS3灰色图像

一开始觉得AS3的滤镜很难使用，尤其是那些矩阵，让人望而生畏。最近写一个聊天模块，要用到离线状态下的灰色头像，于是认真研究了ColorMatrixFilter，发现其实也没有那么难。所谓的矩阵其实就是一个再普通不过的Array，只要弄懂这个Array各个元素的关系就很容易使用滤镜。
      先发代码，下面再详细介绍。这个程序实现加载一张彩色图像，通过滤镜变成黑白图像之后输出。

package {  
    import flash.display.Bitmap;  
    import flash.display.Loader;  
    import flash.display.Sprite;  
    import flash.events.Event;  
    import flash.filters.ColorMatrixFilter;  
    import flash.net.URLRequest;  
  
    public class ColorFilterSample extends Sprite  
    {  
        private var loader:Loader;  
        public function ColorFilterSample()  
        {  
            loader=new Loader();  
            loader.contentLoaderInfo.addEventListener  
                                             (Event.COMPLETE, onComplete);  
            loader.load(new URLRequest("hehua.jpg"));  
        }  
        private function onComplete(e:Event):void{  
            //加载一张彩色图片   
            var image:Bitmap=new Bitmap();  
            image=Bitmap(loader.content);  
            //定义滤镜matrix，一个包含20个项的数组  
            var matrix:Array=[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];  
                //初始化一个ColorMatrixFilter对象(matrix作为参数)  
            var myfilter:ColorMatrixFilter=new ColorMatrixFilter(matrix);  
            //将滤镜应用于图片   
            image.filters=[myfilter];  
            addChild(image);  
        }  
    }  
}  

　　

首先定义一个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。