Android對于圖片處理，最常使用到的數(shù)據(jù)結(jié)構(gòu)是位圖——Bitmap，它包含了一張圖片所有的數(shù)據(jù)抡草。整個圖片都是由點陣和顏色值組成的，所謂點陣就是一個包含像素的矩陣蔗坯，每一個元素對應(yīng)著圖片的一個像素康震。而顏色值——ARGB，分別對應(yīng)透明圖宾濒、紅腿短、綠、藍這四個通道分量，它們共同決定了每個像素點顯示的顏色橘忱。

色彩矩陣分析

在色彩處理中赴魁，通常使用以下三個角度來描述一個圖像。

• 色調(diào)——物體傳播的顏色
• 飽和度——顏色的純度钝诚，從0(灰)到100%（飽和）來進行描述
• 亮度——顏色的相對明暗程度

而在Android中颖御，系統(tǒng)使用一個顏色矩陣——ColorMatrix，來處理圖像的這些色彩效果凝颇。Android中顏色矩陣是一個4x5的數(shù)字矩陣潘拱，它用來對圖片的色彩進行處理。而對于每個像素點拧略，都有一個顏色分量矩陣用來保存顏色的RGBA值芦岂，如下圖所示：

1ACFE032-2E38-409D-A358-343B0807DD3C.png

92C2D1A1-1A49-4277-B7F1-261E8D8B662C.png

其中計算過程如下：

R1 = axR + bxG + cxB + dxA + e；
G1 = fxR + gxG + hxB + ixA + j宁赤；
B1 = kxR + lxG + mxB + nxA + o舀透；
A1 = pxR + qxG + rxB + sxA + t；

從這個公式可以發(fā)現(xiàn)决左，對于顏色矩陣A是按以下方式劃分的愕够。
第一行的abcde值決定新的顏色值中的R——紅色
第二行的fghij值決定新的顏色值中的G——綠色
第三行的klmno值決定新的顏色值中的B——藍色
第四行的pqrst值決定新的顏色值中的A——透明度
矩陣A中的第五列——ejot值分別用來決定每個分量中的offset，即偏移量
現(xiàn)在我們重新看一下矩陣變換的計算公式佛猛，以R分量為例惑芭。如果令a=1，b继找、c遂跟、d、e都等于0婴渡，那么計算結(jié)果為R1=R幻锁。因此，可以構(gòu)造出一個矩陣边臼，如下圖所示：

F215A680-5A48-4DC8-9B2F-95D3D8C8D99D.png

如果把這個矩陣帶入公式D=AC哄尔，那么根據(jù)矩陣乘法運算法則，可以得到R1=R柠并。因此這個矩陣通常被用來作為初始的顏色矩陣來使用岭接，它不會對原有顏色值進行任何變化富拗。
當要變換顏色值的時候，通常有兩種方法鸣戴。一種是直接改變顏色的offset啃沪，即偏移量的值來修改顏色分量，另一種方法是直接改變對應(yīng)RGBA值的系數(shù)來調(diào)整顏色分量的值葵擎。

改變偏移量

要修改R1的值谅阿，只要將第五列的值進行修改即可。即改變顏色的偏移量酬滤，其他值保持初始矩陣的值签餐，如下圖所示：

98F871CE-A122-47F2-BEF6-0AA0E89A4848.png

在上面這個矩陣中，修改了R盯串、G所對應(yīng)的顏色偏移量氯檐，那么最后的處理結(jié)果就是圖像的紅色、綠色分量增加了100体捏。而紅色混合綠色會得到黃色冠摄，所以最終的顏色處理結(jié)果就是讓整個圖像的色調(diào)偏黃色。

改變顏色系數(shù)

如果修改顏色分量中的某個系數(shù)值几缭，而其他值依然保持初始矩陣的值河泳，如下圖所示：

179DBD31-DA4F-40BE-ADD5-FD18BABDF749.png

在上面這個矩陣中，改變了G分量所對應(yīng)的系數(shù)g年栓，這樣在矩陣運算后G分量會變?yōu)橐郧暗膬杀恫鸹樱罱K結(jié)果就是圖像的色調(diào)更加偏綠。

改變色光屬性

圖像的色調(diào)某抓、飽和度纸兔、亮度這三個屬性在圖像處理中的使用非常之多。在Android中否副，系統(tǒng)封裝了一個類——ColorMatrix汉矿，也就是顏色矩陣。通過這個類备禀，可以很方便地通過改變矩陣值來處理顏色效果洲拇。創(chuàng)建一個ColorMatrix對象非常簡單，代碼如下：

ColorMatrix colorMatrix = new ColorMatrix();

下面處理不同的色光屬性曲尸。

• 色調(diào)

Android提供了setRotate(int axis, float degrees)來設(shè)置顏色的色調(diào)呻待。第一個參數(shù)，系統(tǒng)分別使用0队腐、1、2來代表Red奏篙、Green柴淘、Blue三種顏色的處理迫淹；而第二個參數(shù)，就是需要處理的值为严，代碼如下：

    ColorMatrix hueMatrix = new ColorMatrix();
    hueMatrix.setRotate(0, hue1);
    hueMatrix.setRotate(1, hue2);
    hueMatrix.setRotate(2, hue3);

通過這樣的方法敛熬，可以為RGB三種顏色分量分別重新設(shè)置了不同的色調(diào)值。

• 飽和度

Android系統(tǒng)提供了setSaturation(float sat)方法來設(shè)置顏色的飽和度值第股，代碼如下：

    //設(shè)置顏色的飽和度
    ColorMatrix saturationMatrix = new ColorMatrix();
    //saturation參數(shù)即代表設(shè)置顏色的飽和度的值应民，當飽和度為0時，圖像就變成灰度圖像了
    saturationMatrix.setSaturation(saturation);

• 亮度

Android系統(tǒng)提供了setScale(float rScale, float gScale, float bScale, float aScale)方法來設(shè)置顏色的亮度值夕吻。當三原色以相同的比例進行混合時诲锹，就會顯示出白色。系統(tǒng)也正是根據(jù)這個原理來改變一個圖像的亮度的涉馅。當亮度為0時归园，圖像就變?yōu)槿诹耍a如下所示：

    //設(shè)置顏色的亮度
    ColorMatrix lumMatrix = new ColorMatrix();
    lumMatrix.setScale(lum, lum, lum, 1);

• 其他

除了單獨使用上面三種方式進行顏色效果的處理之外稚矿，Android系統(tǒng)還封裝了矩陣的乘法運算庸诱。它提供了postConcat(ColorMatrix postmatrix)方法來將矩陣的作用效果混合，從而疊加處理效果晤揣，代碼如下所示：

    //將矩陣的作用效果混合桥爽，從而疊加處理效果
    ColorMatrix imageMatrix = new ColorMatrix();
    imageMatrix.postConcat(hueMatrix);
    imageMatrix.postConcat(saturationMatrix);
    imageMatrix.postConcat(lumMatrix);

在下面的例子中，通過滑動三個SeekBar來改變不同色光屬性的數(shù)值昧识，并將這些數(shù)值作用到對應(yīng)的矩陣中钠四。最后通過postConcat()方法來顯示混合的處理效果。

滑動SeekBar獲取輸入值的代碼如下所示：

/**
 * 通過滑動三個SeekBar來改變不同色光屬性的數(shù)值滞诺，并將這些數(shù)值作用到對應(yīng)的矩陣中
 */
public class PrimaryColorActivity extends Activity implements SeekBar.OnSeekBarChangeListener {

    private static final int MAX_VALUE = 255;
    private static final int MID_VALUE = 127;

    private ImageView mImageView;
    private float mHue, mSaturation, mLum;
    private Bitmap mBitmap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_primary_color);
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test3);

        mImageView = (ImageView) findViewById(R.id.imageview);
        SeekBar seekBarHue = (SeekBar) findViewById(R.id.seekbarHue);
        SeekBar seekBarSaturation = (SeekBar) findViewById(R.id.seekbarSaturation);
        SeekBar seekBarLum = (SeekBar) findViewById(R.id.seekbarLum);

        seekBarHue.setOnSeekBarChangeListener(this);
        seekBarSaturation.setOnSeekBarChangeListener(this);
        seekBarLum.setOnSeekBarChangeListener(this);

        //設(shè)置最大值
        seekBarHue.setMax(MAX_VALUE);
        seekBarSaturation.setMax(MAX_VALUE);
        seekBarLum.setMax(MAX_VALUE);

        //設(shè)置進度
        seekBarHue.setProgress(MID_VALUE);
        seekBarSaturation.setProgress(MID_VALUE);
        seekBarLum.setProgress(MID_VALUE);

        mImageView.setImageBitmap(mBitmap);
    }


    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        switch (seekBar.getId()) {
            case R.id.seekbarHue://色調(diào)
                mHue = (progress - MID_VALUE) * 1.0f / MID_VALUE * 180;
                break;
            case R.id.seekbarSaturation://飽和度
                mSaturation = progress * 1.0f / MID_VALUE;
                break;
            case R.id.seekbarLum://亮度
                mLum = progress * 1.0f / MID_VALUE;
                break;
        }
        mImageView.setImageBitmap(ImageHelper.handleImageEffect(mBitmap, mHue, mSaturation, mLum));
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
}

設(shè)置圖像矩陣的代碼如下：

/**
 *改變圖像色光屬性
 * @param bm
 * @param hue 色調(diào)
 * @param saturation 飽和度
 * @param lum 亮度
 * @return
 */
public static Bitmap handleImageEffect(Bitmap bm, float hue, float saturation, float lum) {
    //設(shè)置顏色的色調(diào)
    ColorMatrix hueMatrix = new ColorMatrix();
    //第一個參數(shù)形导，系統(tǒng)分別使用0、1习霹、2來代表Red朵耕、Green、Blue三種顏色的處理淋叶；而第二個參數(shù)阎曹，就是需要處理的值
    hueMatrix.setRotate(0, hue);
    hueMatrix.setRotate(1, hue);
    hueMatrix.setRotate(2, hue);

    //設(shè)置顏色的飽和度
    ColorMatrix saturationMatrix = new ColorMatrix();
    //saturation參數(shù)即代表設(shè)置顏色的飽和度的值，當飽和度為0時煞檩，圖像就變成灰度圖像了
    saturationMatrix.setSaturation(saturation);

    //設(shè)置顏色的亮度
    ColorMatrix lumMatrix = new ColorMatrix();
    lumMatrix.setScale(lum, lum, lum, 1);

    //將矩陣的作用效果混合处嫌，從而疊加處理效果
    ColorMatrix imageMatrix = new ColorMatrix();
    imageMatrix.postConcat(hueMatrix);
    imageMatrix.postConcat(saturationMatrix);
    imageMatrix.postConcat(lumMatrix);

    /**
     * 設(shè)置好處理的顏色矩陣后，通過使用Paint類的setColorFilter()方法斟湃，將通過imageMatrix構(gòu)造的
     * ColorMatrixColorFilter對象傳遞進去熏迹，并使用這個畫筆來繪制原來的圖像，從而將顏色矩陣作用到原圖中
     */
    Paint paint = new Paint();
    paint.setColorFilter(new ColorMatrixColorFilter(imageMatrix));
    /**
     * Android系統(tǒng)也不允許直接修改原圖凝赛，類似Photoshop中的鎖定注暗，必須通過原圖創(chuàng)建一個同樣大小的Bitmap坛缕，并將
     * 原圖繪制到該Bitmap中，以一個副本的形式來修改圖像捆昏。
     */
    Bitmap bitmap = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    canvas.drawBitmap(bm, 0, 0 ,paint);
    return bitmap;
}

效果圖如下：

iu.gif

Android顏色矩陣——ColorMatrix

通過調(diào)整顏色矩陣可以改變一副圖像的色彩效果赚楚，圖像處理很大程度上就是在尋找處理圖像的顏色矩陣。不僅僅可以通過Android系統(tǒng)提供的API來進行ColorMatrix的修改骗卜，同樣可以精確地修改矩陣的值來實現(xiàn)顏色效果的改變宠页。下面模擬一個4x5的顏色矩陣，通過修改矩陣中的值寇仓，來觀察圖片的效果

通過GridLayout來進行布局举户，動態(tài)添加20個EditText來創(chuàng)建4x5的矩陣，GridLayout布局代碼如下：

<GridLayout
    android:id="@+id/group"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:columnCount="5"
    android:rowCount="4" />

動態(tài)創(chuàng)建EditText焚刺，添加到GridLayout并初始化矩陣的代碼如下所示：

/**
 * 模擬一個4x5的顏色矩陣
 */
public class ColorMatrixActivity extends Activity {
    private ImageView mImageView;
    private GridLayout mGroup;
    private Bitmap bitmap;
    private int mEtWidth, mEtHeight;
    private EditText[] mEts = new EditText[20];
    private float[] mColorMatrix = new float[20];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_color_matrix);
        bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test1);
        mImageView = (ImageView) findViewById(R.id.imageview);
        mGroup = (GridLayout) findViewById(R.id.group);
        mImageView.setImageBitmap(bitmap);

        mGroup.post(new Runnable() {
            @Override
            public void run() {
                // 獲取寬高信息
                mEtWidth = mGroup.getWidth() / 5;
                mEtHeight = mGroup.getHeight() / 4;
                addEts();
                initMatrix();
            }
        });
    }

    // 初始化顏色矩陣為初始狀態(tài)
    private void initMatrix() {
        for (int i = 0; i < 20; i++) {
            if (i % 6 == 0)
                mEts[i].setText(String.valueOf(1));
            else
                mEts[i].setText(String.valueOf(0));
        }
    }

    // 添加EditText
    private void addEts() {
        for (int i = 0; i < 20; i++) {
            mEts[i] = new EditText(this);
            mGroup.addView(mEts[i], mEtWidth, mEtHeight);
        }
    }

    // 獲取矩陣值
    private void getMatrix() {
        for (int i = 0; i < 20; i++) {
            mColorMatrix[i] = Float.valueOf(mEts[i].getText().toString());
        }
    }

    // 將矩陣值設(shè)置到圖像
    private void setImageMatrix() {
        Bitmap bmp = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.set(mColorMatrix);
        Canvas canvas = new Canvas(bmp);
        Paint paint = new Paint();
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(bitmap, 0, 0, paint);
        mImageView.setImageBitmap(bmp);
    }

    // 作用矩陣效果
    public void btnChange(View view) {
        getMatrix();
        setImageMatrix();
    }

    // 重置矩陣效果
    public void btnReset(View view) {
        initMatrix();
        getMatrix();
        setImageMatrix();
    }
}

常用圖像顏色矩陣處理效果

• 灰度效果

顏色矩陣如下所示：

338D763B-5B30-476F-82D4-1479C1B37C66.png

處理效果如下所示：

device-2017-03-29-143020.png

• 圖像反轉(zhuǎn)

顏色矩陣如下所示：

46E6C620-F998-41D3-8304-F74BA311FEBB.png

處理效果如下所示：

device-2017-03-29-143402.png

• 懷舊效果

顏色矩陣如下所示：

EA005F39-50BB-433E-8479-581ABFFBEEBF.png

處理效果如下所示：

device-2017-03-29-143709.png

• 去色效果

顏色矩陣如下所示：

547B6394-96BB-4A27-861D-56D3445E7BAC.png

處理效果如下所示：

device-2017-03-29-143924.png

• 高飽和度

顏色矩陣如下所示：

4ACCE49A-5647-46E9-A32F-EB1355592B96.png

處理效果如下所示：

device-2017-03-29-144228.png

像素點分析

可以通過改變每個像素點的具體ARGB值敛摘，來達到處理一張圖像效果的目的。但要注意的是乳愉，傳遞進來的原始圖片是不能修改的兄淫，一般根據(jù)原始圖片生成一張新的圖片來修改。

在Android中蔓姚，系統(tǒng)提供了Bitmap.getPixels()方法來幫我們提取整個Bitmap中的像素點捕虽，并保存到一個數(shù)組中，該方法如下所示：

getPixels(int[] pixels, int offset, int stride, int x, int y, int width, int height)

參數(shù)含義如下：

pixels——接收位圖顏色值的數(shù)組
offset——寫入到pixels[]中的第一個像素索引值
stride——用來表示pixels[]數(shù)組中每行的像素個數(shù)坡脐，用于行與行之間區(qū)分泄私，絕對值必須大于參數(shù)width，但不必大于所要讀取圖片的寬度w（在width < w 時成立）;另备闲，pixels.length >= stride * height,否則會拋出ArrayIndexOutOfBoundsException異常晌端。 stride > width時，可以在pixels[]數(shù)組中添加每行的附加信息恬砂，可做它用．
x——從位圖中讀取的第一個像素的x坐標值
y——從位圖中讀取的第一個像素的y坐標值
width——從每一行中讀取的像素寬度
height——讀取的行數(shù)
通常情況下咧纠，可以使用如下代碼：

    int width = bm.getWidth();
    int height = bm.getHeight();   
    int[] oldPx = new int[width * height];
    int[] newPx = new int[width * height];
    bm.getPixels(oldPx, 0, width, 0, 0, width, height);

接下來，就可以獲取到每個像素具體的ARGB值了泻骤，代碼如下所示：

        color = oldPx[i];
        r = Color.red(color);
        g = Color.green(color);
        b = Color.blue(color);
        a = Color.alpha(color);

當獲取到具體的顏色值之后漆羔，就可以通過相應(yīng)的算法來修改它的ARGB值，從而來重構(gòu)一張新的圖像狱掂，例如進行如下處理：

        r1 = (int) (0.393 * r + 0.769 * g + 0.189 * b);
        g1 = (int) (0.349 * r + 0.686 * g + 0.168 * b);
        b1 = (int) (0.272 * r + 0.534 * g + 0.131 * b);

再通過如下所示代碼將新的RGBA值合成像素點：

newPx[i] = Color.argb(a, r1, g1, b1);

最后將處理之后的像素點數(shù)組重新set給Bitmap演痒。從而達到圖像處理的目的：

bmp.setPixels(newPx, 0, width, 0, 0, width, height);

常用圖像像素點處理效果

（實際情況中不要這么操作，效果很慢趋惨，畢竟要一個一個像素點找過去）

• 底片效果

若存在ABC3個像素點鸟顺，要求B點對應(yīng)的底片效果算法，代碼如下：

B.r = 255 - B.r;
B.g = 255 - B.g;
B.b = 255 - B.b;
實現(xiàn)代碼如下：

//底片效果
public static Bitmap handleImageNegative(Bitmap bitmap) {
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    int color;
    int r, g, b, a;

    Bitmap btm = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    int[] oldPx = new int[width * height];
    int[] newPx = new int[width * height];
    bitmap.getPixels(oldPx, 0, width, 0, 0, width, height);

    for (int i = 0; i < width * height; i++) {
        color = oldPx[i];
        r = Color.red(color);
        g = Color.green(color);
        b = Color.blue(color);
        a = Color.alpha(color);

        r = 255 - r;
        g = 255 - g;
        b = 255 - b;

        if (r > 255)
            r = 255;
        else if (r < 0)
            r = 0;
        if (g > 255)
            g = 255;
        else if (g < 0)
            g = 0;
        if (b > 255)
            b = 255;
        else if (b < 0)
            b = 0;
        newPx[i] = Color.argb(a, r, g, b);
    }
    btm.setPixels(newPx, 0, width, 0, 0, width, height);
    return btm;
}

• 老照片效果

求某像素點的老照片效果算法器虾，代碼如下：

    for (int i = 0; i < width * height; i++) {
        color = oldPx[i];
        a = Color.alpha(color);
        r = Color.red(color);
        g = Color.green(color);
        b = Color.blue(color);

        r1 = (int) (0.393 * r + 0.769 * g + 0.189 * b);
        g1 = (int) (0.349 * r + 0.686 * g + 0.168 * b);
        b1 = (int) (0.272 * r + 0.534 * g + 0.131 * b);

        if (r1 > 255) {
            r1 = 255;
        }
        if (g1 > 255) {
            g1 = 255;
        }
        if (b1 > 255) {
            b1 = 255;
        }

        newPx[i] = Color.argb(a, r1, g1, b1);
    }

• 浮雕效果

求某像素點的浮雕效果算法诊沪，代碼如下：

    for (int i = 1; i < width * height; i++) {
        colorBefore = oldPx[i - 1];
        a = Color.alpha(colorBefore);
        r = Color.red(colorBefore);
        g = Color.green(colorBefore);
        b = Color.blue(colorBefore);

        color = oldPx[i];
        r1 = Color.red(color);
        g1 = Color.green(color);
        b1 = Color.blue(color);

        r = r - r1 + 127;
        g = g - g1 + 127;
        b = b - b1 + 127;
        if (r > 255) {
            r = 255;
        }
        if (g > 255) {
            g = 255;
        }
        if (b > 255) {
            b = 255;
        }
        newPx[i] = Color.argb(a, r, g, b);
    }

效果如下所示：

原圖.png

底片

懷舊

浮雕