이미지에 grayscale효과 주기

2013. 8. 8. 17:47

이미지에 grayscale효과 주기

안드로이드 앱을 개발하다 보면 활성화 / 비활성화 표시로 이미지를 grayscale로 만들어 표시할 경우가 있다. 물론 원본 이미지와 grayscale 이미지가 있으면 간단하게 할 수 있지만 원본 이미지만 있어도 코드로
이미지를 grayscale로 만들 수 있다.

1. RGB 이미지를 GrayScale로 변경하기
GrayScale로 변경하기 위해서는 ColorMatrix 클래스를 사용하게 된다. ColorMatrix는 5x4 matrix로 1차원 float 배열 (float[20])을 사용한다. 기본 matrix 값은 아래와 같다. 자세한 내용은 영상처리와 함께 공부하면 도움이 된다.
*http://developer.android.com/reference/android/graphics/ColorMatrix.html

1 0 0 0 0 - red
0 1 0 0 0 - green
0 0 1 0 0 - blue
0 0 0 1 0 - alpha

기본적으로 밝기 조절은 5번째 행의 값을 올려주면 그 만큼 밝아지게 된다. contrast 조절은 기본 matrix의 1로 된 부분의 값을 변경해 주면 된다.

grayscale로 변경할 때는 직접 matrix 값을 수정할 필요하가 없다. 수학에 약한 사람이라면 참 다행인 일이다. 나에게도 다행이다. ^^;;

색의 3요소는 색상, 명도, 채도 이다.(인터넷에 나와있다. 필자는 미술에 약하다ㅠ.ㅠ) grayscale로 만들기 위해서는 채도를 수정해야 한다. 채도값이 없으면 흰색, 검은색 등 무채색이 된다. 즉 grayscale은 채도값을 0으로 만들어 주면 된다.

ColorMatrix.setSaturation(float sat); 메소드를 사용하면 RGB 이미지를 grayscale로 만들 수 있다.
RGB 이미지를 grayscale로 바꾸는 ColorMatrix를 생성했는데 어떻게 적용할까?

방법은 2가지가 있다. 이미지 뷰에 적용하는 방법, 그리고 drawable에 적용하는 방법.

2. 이미지뷰에 적용하기
ImageView.setColorFilter(ColorFliter filter); 메소드가 있다. 이 메소드를 이용하여 적용하면 된다. 하지만 파라미터의 데이터 형은 ColorFilter이다. ColorMatrix를 적용할 수 없다. 이를 가능하게 해주는 다리 역할을 ColorMatrixColorFilter 클래스가 한다. 이제 적용해 보자.

//이미지뷰를 gray scale로 변경
public void setGrayScale(ImageView v){
    ColorMatrix matrix = new ColorMatrix();
    matrix.setSaturation(0);                        //0이면 grayscale
    ColorMatrixColorFilter cf = new ColorMatrixColorFilter(matrix);
    v.setColorFilter(cf);
}

3. Drawable에 적용하기
Drawable.setColorFilter(ColorFliter filter); 메소드가 있다. 이미지뷰의 마찬가지로 ColorMatrixColorFilter를 사용하면 된다.

//drawable만 grayscale로 변경
public Drawable convertGrayScale(Drawable d){
    ColorMatrix matrix = new ColorMatrix();
    matrix.setSaturation(0);                    //0이면 grayscale
    ColorMatrixColorFilter cf = new ColorMatrixColorFilter(matrix);
    d.setColorFilter(cf);

    return d;
}

4. 적용한 ColorMatrix 되돌리기
ImageView와 Drawable 모두 clearColorFilter(); 메소드가 있다. 이 메소드를 이용하여 적용된 ColorMatrix를 다시 되될릴 수 있다.

m2ndImageView.clearColorFilter(); //이미지뷰의 컬러필터 삭제
m3rdImageView.getDrawable().clearColorFilter(); //drawable의 컬러필터 삭제

Drawable의 ColorFilter를 되돌렸으면 해당 drawable을 사용하는 뷰를 invalidate() 해준다.

m3rdImageView.invalidate();                                //3번째 이미지뷰 새로 고침

5. Drawable에 적용할 경우 주의 사항
Drawalbe을 얻어올 때 앱 내의 res폴더에 있는 이미지를 얻어올 경우( ImageView.getDrawable(), Resources.getDrawable(int id) ) 얻어온 drawable에 바로 ColorMatrix를 적용하면 안된다. 이 경우 해당 리소스가 변경되는 것이므로 그 리소스를 쓰는 다른 뷰의 이미지도 같이 변경된다. 이런 경우를 막기 위해 가져온 Drawable 객체의 mutate() 메소드를 써서 다시 drawable을 가져오는 것이다.

Drawable d = m3rdImageView.getDrawable().mutate();        //drawable을 얻어옴.
m3rdImageView.setImageDrawable(convertGrayScale(d));        //grayscale로 변경 후 이미지 지정

전체 샘플 코드 첨부하였습니다.
*글과 자료는 출처만 밝히시면 얼마든지 가져다 쓰셔도 됩니다.

GrayScaleTest.zip