Android 圖片顏色處理

對圖像進行顏色方面的處理，通過使用顏色矩陣（ColorMatrix）來實現。從而可以達到很多特效如黑白老照片、泛黃舊照片等等。

1.顏色矩陣(ColorMatrix)

這裏有詳細的介紹：http://developer.android.com/reference/android/graphics/ColorMatrix.html

不過是英文的，在這裏我就先導讀一下。

一張位圖可以轉換爲一個5*4的矩陣，涉及到顏色和透明度。如圖1所示。在Android中，顏色矩陣M是以一維數組m=[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t]的方式進行存儲的。

圖1

在一張圖片中，圖像的RGBA（紅色、綠色、藍色、透明度）值決定了該圖片所呈現出來的顏色效果。
而圖像的RGBA值則存儲在一個5*1的顏色分量矩陣C中，由顏色分量矩陣C可以控制圖像的顏色效果。顏色分量矩陣C如圖2所示。

圖2

要想改變一張圖片的顏色效果，只需要改變圖像的顏色分量矩陣即可。通過顏色矩陣可以很方便的修改圖像的顏色分量矩陣。假設修改後的圖像顏色分量矩陣爲C1，則有如圖3所示的顏色分量矩陣計算公式。

圖3

由此可見，通過顏色矩陣修改了原圖像的RGBA值，從而達到了改變圖片顏色效果的目的。並且，通過如圖3所示的運算可知，顏色矩陣M的第一行參數abcde決定了圖像的紅色成分，第二行參數fghij決定了圖像的綠色成分，第三行參數klmno決定了圖像的藍色成分，第四行參數pqrst決定了圖像的透明度，第五列參數ejot是顏色的偏移量。
通常，改變顏色分量時可以通過修改第5列的顏色偏移量來實現，如圖4所示的顏色矩陣M1，通過計算後可以得知該顏色矩陣的作用是使圖像的紅色分量和綠色分量均增加100，這樣的效果就是圖片泛黃（因爲紅色與綠色混合後得到黃色）。

圖4

除此之外，也可以通過直接對顏色值乘以某一系數而達到改變顏色分量的目的。如圖5所示的顏色矩陣M2，將綠色分量放大了2倍，這樣的效果就是圖片泛綠色。

圖5

實例：

步驟一：我們首先自定義一個view，用來顯示我們處理的圖片。

ColorView.java

package com.mycolor;
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.widget.ImageView;
public class ColorView extends ImageView {
private Paint myPaint = null;
private Bitmap bitmap = null;
private ColorMatrix myColorMatrix = null;
private float[] colorArray = {1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0};
public ColorView(Context context, AttributeSet attrs)
{
super(context, attrs);
bitmap = BitmapFactory.decodeResource(context.getResources(),R.drawable.a2);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//新建畫筆對象
myPaint = new Paint();
//描畫（原始圖片）
canvas.drawBitmap(bitmap,0, 0, myPaint);
//新建顏色矩陣對象
myColorMatrix = new ColorMatrix();
//設置顏色矩陣的值
myColorMatrix.set(colorArray);
//設置畫筆顏色過濾器
myPaint.setColorFilter(new ColorMatrixColorFilter(myColorMatrix));
//描畫（處理後的圖片）
canvas.drawBitmap(bitmap,0,0,myPaint);
invalidate();
}
//設置顏色數值
public void setColorArray(float[] colorArray){
this.colorArray = colorArray;
}
//設置圖片
public void setBitmap(Bitmap bitmap){
this.bitmap = bitmap;
}
}

步驟二：自定義我們的佈局

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/colorView_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.mycolor.ColorView
android:id="@+id/myColorView"
android:layout_width="480dp"
android:layout_height="180dp"/>
<LinearLayout
android:id="@+id/colorlayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/Edit1"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="1" />
<EditText
android:id="@+id/Edit2"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0"
/>
<EditText
android:id="@+id/Edit3"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit4"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit5"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
</LinearLayout>
<LinearLayout
android:id="@+id/colorlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/Edit6"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit7"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="1" />
<EditText
android:id="@+id/Edit8"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit9"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit10"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
</LinearLayout>
<LinearLayout
android:id="@+id/colorlayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/Edit11"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit12"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit13"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="1" />
<EditText
android:id="@+id/Edit14"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit15"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
</LinearLayout>
<LinearLayout
android:id="@+id/colorlayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/Edit16"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit17"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit18"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
<EditText
android:id="@+id/Edit19"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="1" />
<EditText
android:id="@+id/Edit20"
android:layout_width="50dp"
android:layout_height="40dp"
android:layout_weight="1"
android:text="0" />
</LinearLayout>
<Button
android:id="@+id/Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:text="提交" />
</LinearLayout>

步驟三：完成我們的Activity

package com.mycolor;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
public class ColorActivity extends Activity implements OnClickListener{
private Button button = null;
private ColorView colorView = null;
private EditText[] editTextArray = null;
private float colorArray[] = null;
private int[] EditTextID = {R.id.Edit1,R.id.Edit2,R.id.Edit3,R.id.Edit4,R.id.Edit5,
R.id.Edit6,R.id.Edit7,R.id.Edit8,R.id.Edit9,R.id.Edit10,
R.id.Edit11,R.id.Edit12,R.id.Edit13,R.id.Edit14,R.id.Edit15,
R.id.Edit16,R.id.Edit17,R.id.Edit18,R.id.Edit19,R.id.Edit20};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
button = (Button)findViewById(R.id.Button);
button.setOnClickListener(this);
editTextArray = new EditText[20];
colorArray = new float[20];
for(int i = 0;i < 20;i++){
editTextArray[i] = (EditText)findViewById(EditTextID[i]);
}
colorView = (ColorView)findViewById(R.id.myColorView);
}
@Override
public void onClick(View v) {
for(int i = 0;i < 20;i++){
colorArray[i] = Float.valueOf(editTextArray[i].getText().toString().trim());
System.out.println("i = " + i + ":" + editTextArray[i].getText().toString().trim());
}
colorView.setColorArray(colorArray);
}
}