Android图片处理ColorMatrix

首先声明，该文章为自己学习笔记，仅供参考，不保证所有文字均描述得当，欢迎指出不足和错误之处，再此感谢您的关注和阅读。如果有需要代码的可以留言，和我联系。

0 前面的废话

前几天做一个图像识别的时候，用到了ColorMatrix，然后找到了一篇文章，写的很不错，确实按照他的方法实现了。原文没有给xml，所以很是费了些时间，然后我又改进了一些，前面的描述都是原文的描述，写的很好，后面代码是自己的。

参考文章：Android图片处理（Matrix,ColorMatrix）http://www.cnblogs.com/leon19870907/articles/1978065.html

一.ColorMatrix的原理

        在编程中有时候需要对图片做特殊的处理，比如将图片做出黑白的，或者老照片的效果，有时候还要对图片进行变换，以拉伸，扭曲等等。

这些效果在android中有很好的支持，通过颜色矩阵（ColorMatrix）和坐标变换矩阵（Matrix）可以完美的做出上面的所说的效果。

下面将分别介绍这两个矩阵的用法和相关的函数。

颜色矩阵
android中可以通过颜色矩阵（ColorMatrix类）方面的操作颜色，颜色矩阵是一个5x4 的矩阵

可以用来方面的修改图片中RGBA各分量的值，颜色矩阵以一维数组的方式存储如下：
 [ a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t ]
他通过RGBA四个通道来直接操作对应颜色，如果会使用Photoshop就会知道有时处理图片通过控制RGBA各颜色通道来做出特殊的效果。

矩阵的运算规则是矩阵A的一行乘以矩阵C的一列作为矩阵R的一行，

C矩阵是图片中包含的ARGB信息，R矩阵是用颜色矩阵应用于C之后的新的颜色分量，运算结果如下：
 
R' = a*R + b*G + c*B + d*A + e;
G' = f*R + g*G + h*B + i*A + j;
B' = k*R + l*G + m*B + n*A + o;
A' = p*R + q*G + r*B + s*A + t;
 
颜色矩阵并不是看上去那么深奥，其实需要使用的参数很少，而且很有规律第一行决定红色第二行决定绿色

第三行决定蓝色，第四行决定了透明度，第五列是颜色的偏移量。下面是一个实际中使用的颜色矩阵。


如果把这个矩阵作用于各颜色分量的话，R=A*C，计算后会发现，各个颜色分量实际上没有任何的改变(R'=R G'=G B'=B A'=A)。

图1.5所示矩阵计算后会发现红色分量增加100，绿色分量增加100，

这样的效果就是图片偏黄，因为红色和绿色混合后得到黄色，黄色增加了100，图片当然就偏黄了。

改变各颜色分量不仅可以通过修改第5列的颜色偏移量也可如上面矩阵所示将对应的颜色值乘以一个倍数，直接放大。

上图1.6是将绿色分量乘以2变为原来的2倍。相信读者至此已经明白了如何通过颜色矩阵来改变各颜色分量。

下面编写一段代码来，通过调整颜色矩阵来获得不同的颜色效果。

二 代码实现

首先，写一个MyImage.java，这个主要是写了一个自定义的View。为后面的View服务

package com.example.android.apis.view.colormatrix;

import com.example.android.apis.R;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class MyImage extends View {  
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
    private Bitmap mBitmap;  
    private float [] array=new float[20];   
      
    public MyImage(Context context,AttributeSet attrs) {  
        super(context,attrs);    
        //mBitmap    = BitmapFactory.decodeResource(context.getResources(),R.drawable.ic_launcher);
        String dir = android.os.Environment.getExternalStorageDirectory()+"/1317835083240.jpg";
        mBitmap=BitmapFactory.decodeFile(dir);
        Log.i("1",android.os.Environment.getExternalStorageDirectory()+" ");
        //mBitmap=BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);
        invalidate();  
    }  
     
      
    public void setValues(float [] a){  
        for(int i=0;i<20;i++){  
           array[i]=a[i];  
        }  
          
    }  
      
    @Override 
    protected void onDraw(Canvas canvas) {  
        Paint paint = mPaint;    
        paint.setColorFilter(null);  
        canvas.drawBitmap(mBitmap, 0, 0, paint);  
          
        ColorMatrix cm = new ColorMatrix();  
       //设置颜色矩阵  
        cm.set(array);  
//颜色滤镜，将颜色矩阵应用于图片  
        paint.setColorFilter(new ColorMatrixColorFilter(cm));  
//绘图  
        canvas.drawBitmap(mBitmap, 0, 0, paint);  
        Log.i("CMatrix", "--------->onDraw");  
   
         
    }  
     
}

CMatrix.java

package com.example.android.apis.view.colormatrix;

import com.example.android.apis.R;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class CMatrix extends Activity {  
    
    private Button change,change1,change2,change3;  
    private EditText [] et=new EditText[20];  
    private float []carray=new float[20];  
    private MyImage sv;  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.imgmain);  
          
       change=(Button)findViewById(R.id.set);
       change1=(Button)findViewById(R.id.set1);
       change2=(Button)findViewById(R.id.set2);
       change3=(Button)findViewById(R.id.set3);
       sv=(MyImage)findViewById(R.id.MyImage);  
      
       for(int i=0;i<20;i++){  
            
       et[i]=(EditText)findViewById(R.id.indexa+i);  
       carray[i]=Float.valueOf(et[i].getText().toString()); 
       Log.i("et["+i+"]",et[i].getText().toString());
       }  
          
       change.setOnClickListener(l);
       change1.setOnClickListener(l1); 
       change2.setOnClickListener(l2); 
       change3.setOnClickListener(l3); 
    }  
      
    private Button.OnClickListener l=new Button.OnClickListener(){  
   
       @Override  
       public void onClick(View arg0) {  
           // TODO Auto-generated method stub  
           getValues();
           sv.setValues(carray);  
           sv.invalidate();  
       }  
          
    };
    private Button.OnClickListener l1=new Button.OnClickListener(){  
    	   
        @Override  
        public void onClick(View arg0) {  
            // TODO Auto-generated method stub  
            getValue1();
            setValue();
            sv.setValues(carray);  
            sv.invalidate();  
        }  
           
     };
     private Button.OnClickListener l2=new Button.OnClickListener(){  
    	   
         @Override  
         public void onClick(View arg0) {  
             // TODO Auto-generated method stub  
        	 Log.i("自由","点击");
             getValue2();
             setValue();
             sv.setValues(carray);  
             sv.invalidate();  
         }  
            
      };
      private Button.OnClickListener l3=new Button.OnClickListener(){  
    	   
          @Override  
          public void onClick(View arg0) {  
              // TODO Auto-generated method stub  
              getValue3();
              setValue();
              sv.setValues(carray);  
              sv.invalidate();  
          }  
             
       };
    
    public   void getValues(){  
        for(int i=0;i<20;i++){  
              
            carray[i]=Float.valueOf(et[i].getText().toString());
            Log.i("1", carray[i]+"");
        }  
          
    }  
    public   void getValue1(){  

    	//高饱和度
    	            carray[0]=5;
    	            carray[1]=0;
    	            carray[2]=0;
    	            carray[3]=0;
    	            carray[4]=-254;
    	            carray[5]=0;
    	            carray[6]=5;
    	            carray[7]=0;
    	            carray[8]=0;
    	            carray[9]=-254;
    	            carray[10]=0;
    	            carray[11]=0;
    	            carray[12]=5;
    	            carray[13]=0;
    	            carray[14]=-254;
    	            carray[15]=0;
    	            carray[16]=0;
    	            carray[17]=0;
    	            carray[18]=5;
    	            carray[19]=-254;
          
    } 
    public   void getValue2(){  
    	//色相变化
        carray[0]=(float) -0.36;
        carray[1]=(float) 1.691;
        carray[2]=(float) -0.32;
        carray[3]=0;
        carray[4]=0;
        carray[5]=(float) 0.325;
        carray[6]=(float) 0.398;
        carray[7]=(float) 0.275;
        carray[8]=0;
        carray[9]=0;
        carray[10]=(float) 0.79;
        carray[11]=(float) 0.79;
        carray[12]=(float) -0.76;
        carray[13]=0;
        carray[14]=0;
        carray[15]=0;
        carray[16]=0;
        carray[17]=0;
        carray[18]=1;
        carray[19]=0;
          
    } 
    public   void getValue3(){  
      
    	//黑白
        carray[0]=(float) 0.308;
        carray[1]=(float) 0.609;
        carray[2]=(float) 0.082;
        carray[3]=0;
        carray[4]=0;
        carray[5]=(float) 0.308;
        carray[6]=(float) 0.609;
        carray[7]=(float) 0.082;
        carray[8]=0;
        carray[9]=0;
        carray[10]=(float) 0.308;
        carray[11]=(float) 0.609;
        carray[12]=(float) 0.082;
        carray[13]=0;
        carray[14]=0;
        carray[15]=0;
        carray[16]=0;
        carray[17]=0;
        carray[18]=1;
        carray[19]=0;
    } 
    public   void setValue(){

        for(int i=0;i<20;i++){  
             
        	et[i]=(EditText)findViewById(R.id.indexa+i);
        	et[i].setText(carray[i]+"");
        	carray[i]=Float.valueOf(et[i].getText().toString()); 
        	Log.i("et["+i+"]",et[i].getText().toString());
        }  
    }
      
}  

xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <TextView android:textSize="15.0sp" 
	        android:textStyle="bold" 
	        android:textColor="#ffffffff" 
	        android:padding="2.0sp" 
	        android:layout_width="wrap_content" 
	        android:layout_height="wrap_content" 
	        android:layout_marginLeft="2.0sp" 
	        android:text="红色(R)"
         /> 
        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" >
                       
            <requestFocus />
        </EditText>

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa1"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa2"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa3"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />
        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa4"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        
        <TextView android:textSize="15.0sp" 
	        android:textStyle="bold" 
	        android:textColor="#ffffffff" 
	        android:padding="2.0sp" 
	        android:layout_width="wrap_content" 
	        android:layout_height="wrap_content" 
	        android:layout_marginLeft="2.0sp" 
	        android:text="绿色(G)"
         /> 
        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa5"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" >

        </EditText>

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa6"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa7"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa8"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />
        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa9"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

    </LinearLayout>
	    <LinearLayout
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal" >
        <TextView android:textSize="15.0sp" 
	        android:textStyle="bold" 
	        android:textColor="#ffffffff" 
	        android:padding="2.0sp" 
	        android:layout_width="wrap_content" 
	        android:layout_height="wrap_content" 
	        android:layout_marginLeft="2.0sp" 
	        android:text="蓝色(B)"
         />	
	    <EditText
	        android:text="0"
	        android:textSize="10dip"
	        android:id="@+id/indexa10"
	        android:layout_width="60dp"
	        android:layout_height="40dp"
	        android:layout_weight="1" >
	    </EditText>
	
	    <EditText
	        android:text="0"
	        android:textSize="10dip"
	        android:id="@+id/indexa11"
	        android:layout_width="60dp"
	        android:layout_height="40dp"
	        android:layout_weight="1" />
	
	    <EditText
	        android:text="0"
	        android:textSize="10dip"
	        android:id="@+id/indexa12"
	        android:layout_width="60dp"
	        android:layout_height="40dp"
	        android:layout_weight="1" />
	
	    <EditText
	        android:text="0"
	        android:textSize="10dip"
	        android:id="@+id/indexa13"
	        android:layout_width="60dp"
	        android:layout_height="40dp"
	        android:layout_weight="1" />
	    <EditText
	        android:text="0"
	        android:textSize="10dip"
	        android:id="@+id/indexa14"
	        android:layout_width="60dp"
	        android:layout_height="40dp"
	        android:layout_weight="1" />
	
	</LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <TextView android:textSize="15.0sp" 
	        android:textStyle="bold" 
	        android:textColor="#ffffffff" 
	        android:padding="2.0sp" 
	        android:layout_width="wrap_content" 
	        android:layout_height="wrap_content" 
	        android:layout_marginLeft="2.0sp" 
	        android:text="透明(A)"
         />
        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa15"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" >
        </EditText>

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa16"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa17"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa18"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />
        <EditText
            android:text="0"
            android:textSize="10dip"
            android:id="@+id/indexa19"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    <Button
        android:id="@+id/set"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:text="自由" />
    <Button
        android:id="@+id/set1"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:text="多彩" />
    <Button
        android:id="@+id/set2"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:text="色相" />
    <Button
        android:id="@+id/set3"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:text="黑白" />
    </LinearLayout>
    <com.example.android.apis.view.colormatrix.MyImage
        android:id="@+id/MyImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

三，效果演示