Android study note 22: Image Color Processing (ColorMatrix)

In Android, you can use a color matrix to process the color of an image, such as a black or white image, a yellow image, a high contrast, or a low saturation.

1. Introduction to color matrix

Color matrix M is a 5*4 matrix, as shown in 1. In Android, the color matrix M is a one-dimensional array m = [a, B, c, d, e, f, g, h, I, j, k, l, m, n, o, p, q, r, s, t] storage.

 

Figure 1 color matrix M

In an image, the RGBA (red, green, blue, and transparency) value determines the color of the image. The RGBA value of the image is stored in a 5*1 color component matrix C, and the color effect of the image can be controlled by the color component matrix C. The color component matrix C2 is shown.

 

Figure 2 color component matrix C

To change the color effect of an image, you only need to change the color matrix of the image. The color matrix allows you to easily modify the color matrix of an image. Assume that the color matrix of the modified image is C1, the formula for calculating the color matrix is 3.

 

Figure 3 calculation formula of color component matrix

It can be seen that the RGBA value of the original image is modified through the color matrix to achieve the goal of changing the color effect of the image. In addition, according to the operation shown in 3, the first line parameter abcde of the color matrix M determines the red component of the image, and the second line parameter fghij determines the green component of the image, the parameter klmno in the third row determines the blue component of the image. The parameter pqrst in the fourth row determines the transparency of the image. The parameter ejot in the fifth column is the offset of the color.

Generally, you can modify the color offset of the 5th column when changing the color weight, as shown in figure 4, the color matrix M1, after calculation, we can know that the color matrix is used to increase the red and green components of the image by 100. This effect is that the image is yellow (because the red and green colors are mixed to produce yellow ).

 

Figure 4 color matrix M1

In addition, you can change the color component by multiplying the color value by a certain coefficient. As shown in figure 5, the color matrix M2 doubles the green component. The effect is that the image is pan-green.

 

Figure 5 color matrix M2

 

2. Image color processing example

After learning about the working principle of the color matrix, we can use the color matrix to process the image.

2.1 main interface Layout

In the main interface layout, you must first customize a View control to display the image processing effect. Then, 20 EditText controls are required to enter the color matrix value. A Button control is also required to submit image processing requests. The page layout is shown in Figure 6.

 

Figure 6 main interface Layout

The top image on the main interface is the original image for color processing. In the 20 EditText controls, we set the initial values of the color matrix to {, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }. The custom View control can be defined in the xml layout file by referring to the following method.

1 <! -- Custom View control -->
2 <com. example. android_colormatrix.MyView
3 android: id = "@ + id/myView"
4 android: layout_width = "480dp"
5 android: layout_height = "180dp">
6 </com. example. android_colormatrix.MyView>
Note that the custom control must contain the complete package name. The code above shows that the custom control is implemented in MyView. Next, let's take a look at how the custom View control is implemented in MyView.

2.2 Implementation of custom View Controls

To implement a custom View class, you only need to let MyView inherit the View class and override the OnDraw () method of the View class.

In the OnDraw () method, we need to do five things:

(1) create a Paint brush object for plotting.

(2) create a ColorMatrix color matrix object to store the color matrix.

(3) set the color matrix value of ColorMatrix.

(4) set the color filter of the Paint brush.

(5) Use a Paint brush to draw and output Bitmap images.

The specific implementation code of the above five steps is as follows:

1 /**
2 * Function: plotting Function
3 * Param: canvas object
4 * Author: blog Park-still indifferent
5 */
6 public void onDraw (Canvas canvas ){
7
8 Paint mPaint = new Paint (); // creates a Paint brush object.
9 canvas. drawBitmap (mBitmap, 0, 0, mPaint); // draw (original image)
10
11 ColorMatrix mColorMatrix = new ColorMatrix (); // creates a color matrix object.
12 mColorMatrix. set (array); // sets the color matrix value.
13 mPaint. setColorFilter (new ColorMatrixColorFilter (mColorMatrix); // sets the paint color filter.
14 canvas. drawBitmap (mBitmap, 0, 0, mPaint); // sketch (processed image)
15}
Among them, mBitmap is the image object to be processed. Array is used to store the user input values we obtain from the EditText control. How can I store user input values in the EditText control in an array? You can use the following method.

1 /**
2 * Function: Obtain the input value from EditText and store it in the array.
3 * Param:
4 * Author: blog Park-still indifferent
5 */
6 public void getValues (){
7 for (int I = 0; I <20; I ++ ){
8 array [I] = Float. valueOf (mEditText [I]. getText (). toString ());
9}
10}
2.3 instance Effects

After running the program, enter the color matrix value in the interface shown in 6 and click the "transform" button to see different image processing effects.

If we increase the red weight of the color matrix by 2 times, we can get the reddish image 7.

 

Figure 7 effect of a red image

In addition, we can also use the color matrix to easily achieve high contrast, high saturation, color phase conversion and other image processing effects, as shown in 8.

 

Figure 8 image processing result