image

이미지를 사용함에 있어 커다란 이미지를 썸네일화 할때 아래와 같이 Matrix를 사용하여
원본 객체에서 비트맵을 재 생성하여 사용하곤 하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/** 원천 비트맵 데이터를 리사이징하여 리턴한다. */
public function getResizeBtm(_w:Number = 0, _h:Number = 0):Bitmap
{
	var btm:Bitmap;
	var btmd:BitmapData;
 
	btmd = new BitmapData( _w, _h, true, 0x00000000 );
 
	var w:Number = _w / this.loader.width;
	var h:Number = _h / this.loader.height;
	btmd.draw( this.loader,  new Matrix(w, 0, 0, h, 0, 0) );
	btm = new Bitmap(btmd, "auto", true);
 
	return btm;
}

물론, 이미지가 큰 경우는 썸네일과 큰 이미지를 분리한다.
하지만 어중간한 이미지 같은 경우, 대략 500×500 정도 된다면은 로드하여 위와 같이 줄여서 사용해도 무방하다.

하지만, 이 포스트는 어중간한 이미지의 사이즈를 확대/축소 했을때의 퀄리티를 유지하기 위한 것이다.
500×375 이미지를 100×75 이미지로 줄인다고 가정했을 경우 얼마나 이미지 품질이 떨어질까?

우선 아래의 두 이미지를 보자. 배경은 1:1의 이미지이고, 좌상단의 썸네일 100×75로 Matrix를 사용하여 생성했다.

그리고 같은 크기로 아래와 같이 줄였다. 눈으로 보기에는 전혀 품질이 떨어졌는지를 확인할 수 없다.

하지만, 아래와 같이 확대를 했을 경우 퀄리티 차이를 적날하게 실감할 수 있다.

아래는 2배 축소된 이미지를 로드 후 확대하여 Matrix와 Shader, bicubic Shader에 적용한 결과이다.
Matrix

Shader

bicubic Shader

차이가 느껴지는지?? 자세히 보면 바로 주변의 색을 얼마나 완벽하게 반영한 것인가다.

개인적으로 bicubic이 Shader와 눈에 크게 차이가 나지 않는다.
이정도 차이라면 Shader를 사용하는 것이 좋다고 판단한다.
플래시에선 극한 최적화란 적용할때 그 만큼 계산이 CPU 퍼포먼스를 잡아먹기 때문이다.

정말 위 이미지를 자세히 보았다면? 색상의 주변의 이글거림이 bicubic이 좀 더 심하다.
이상하여 공식을 봤지만 제대로 적용한 것.

아래의 SWF는 mouseX, mouseY 값 중 최소값을 사용하여 위 이미지 두번째인 Shader를 적용한 이미지 리사이징이다.
마우스 우측 버튼을 눌러서 확대를 하여 직접 퀄리티가 어느정도로 떨어지는가를 볼 수 있을 것이다.

사용한 쉐이더는 히카형의 “BitmapData 확대축소 문제해결“의 PBK를 토대로 만들었다.