Flex Image에서 리사이즈 화질 문제

Flex에서 이미지를 리사이징해서 보여 주는 경우 부드럽게 안 나오고 깨져 보이는 현상이 있다. 해결 방법을 찾아보니 의외로 그렇게 간단하지 않았다.

1. BlurFilter를 이용해 적당히 블러를 준다.

  <mx:Image width="120" height="120" source="sample.jpg">
    <mx:filters>
      <mx:BlurFilter blurX="1.2" blurY="1.2"/>
    </mx:filters>
  </mx:Image>

2. Image content(Bitmap)의 smoothing Property를 true로 변경한다.

  <mx:Script>
    <![CDATA[
    public function smoothImage(event:Event):void
    {
      var bitmap:Bitmap = ((event.target as Image).content as Bitmap);
      if (bitmap != null) {
        bitmap.smoothing = true;
      }
    }
    ]]>
  </mx:Script>
  <mx:Image width="120" height="120" source="sample.jpg" complete="smoothImage(event)"/>

3. 별도의 인터폴레이션 알고리즘을 구현하거나 구현한 라이브러리를 사용한다.

위의 이미지가 왼쪽부터 각각 그냥 이미지를 리사이징한 경우, BlurFilter를 사용한 경우, smoothing Property를 사용한 경우이다. 3번은 알고리즘을 구현하거나 라이브러리를 사용하는 것은 꼭 필요한 경우가 아니라면 별로 사용하고 싶지 않아서 테스트해보지 않았다.
1번 BlurFilter를 사용하는 경우 어떤 이미지에서는 괜찮아 보이기도 하지만 역시 눈속임에 가깝고 여전히 이미지가 깨져 보이는 경우가 많아서 2번 smoothing Property를 사용하는 것이 더 적절한 해결책으로 보인다.