Thursday, October 3, 2013

Convert Bitmap to gray-scale with ColorMatrix

To convert Bitmap to gray-scale, we can apply ColorMatrix with the following matrix:

   //Array to generate Gray-Scale image
   float[] GrayArray = {
     0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
     0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
     0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
     0.0f, 0.0f, 0.0f, 1.0f, 0.0f,  
   };

Convert Bitmap to gray-scale with ColorMatrix


package com.example.androiddrawbitmap;

import java.io.FileNotFoundException;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
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.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

 Button btnLoadImage;
 ImageView imageResult;

 final int RQS_IMAGE1 = 1;

 Uri source;
 Bitmap bitmapMaster;
 Canvas canvasMaster;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  btnLoadImage = (Button) findViewById(R.id.loadimage);
  imageResult = (ImageView) findViewById(R.id.result);

  btnLoadImage.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View arg0) {
    Intent intent = new Intent(
      Intent.ACTION_PICK,
      android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    startActivityForResult(intent, RQS_IMAGE1);
   }
  });

 }

 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);

  if (resultCode == RESULT_OK) {
   switch (requestCode) {
   case RQS_IMAGE1:
    source = data.getData();

    try {
     bitmapMaster = BitmapFactory
       .decodeStream(getContentResolver().openInputStream(
         source));
     loadGrayBitmap(bitmapMaster);

    } catch (FileNotFoundException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
    }

    break;
   }
  }
 }

 private void loadGrayBitmap(Bitmap src) {
  if (src != null) {
   
   //Array to generate Identity image
   float[] IdentityArray = {
     1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
     0.0f, 1.0f, 0.0f, 0.0f, 0.0f,
     0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
     0.0f, 0.0f, 0.0f, 1.0f, 0.0f,  
   };
   
   //Array to generate Gray-Scale image
   float[] GrayArray = {
     0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
     0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
     0.213f, 0.715f, 0.072f, 0.0f, 0.0f,
     0.0f, 0.0f, 0.0f, 1.0f, 0.0f,  
   };
   
   ColorMatrix colorMatrixGray = new ColorMatrix(GrayArray);

   int w = src.getWidth();
   int h = src.getHeight();
   
   Bitmap bitmapResult = Bitmap
     .createBitmap(w, h, Bitmap.Config.ARGB_8888);
   Canvas canvasResult = new Canvas(bitmapResult);
   Paint paint = new Paint();
   
   ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrixGray);
   paint.setColorFilter(filter);
   canvasResult.drawBitmap(src, 0, 0, paint);

   imageResult.setImageBitmap(bitmapResult);
  }
 }

}


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/loadimage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Load Image 1" />
    
    <ImageView
                android:id="@+id/result"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:background="@android:color/background_dark"
                android:scaleType="centerInside" />

</LinearLayout>


download filesDownload the files.

download filesDownload and try the APK.

Remark: This exercise aim to demonstrate the matrix. Actually you can setSaturation(0) of  ColorMatrix to do the same effect.



more: Something about processing images in Android

3 comments:

AmmarNavid said...

Hello,
Very good work. I have been following your blog since a long time and love the codes you have provided. Can you please also tell how to save the image after conversion?

Andr.oid Eric said...

hello AmmarNavid ,

Please refer HERE.

itsnaini luthfiah said...
This comment has been removed by the author.