본문 바로가기

컴터/Flash & Flex

화면캡쳐는 ImageSnapshot 클래스를 사용하자

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
http://cafe.naver.com/flexcomponent
http://blog.flexexamples.com/2007/12/08 ··· lex-3%2F

Flex2에서 화면을 캡쳐하는 클래스와 JPG 또는 PNG로 변환하는 클래스를 따로 만들어야만 했다.

Flex3 부터는 그럴 필요가 없다.
Flex3에서는 IImageEncoder를 Interface로 하는 JPGEncoder, PNGEncoder가 추가되었고
더불어 ImageSnapShot 클래스가 만들어져서 이들 Encoder를 사용하여 화면을 캡쳐할 수 있도록 했다.

캡쳐 결과는 BitmapData(captureBitmapData() 함수) 또는 Image형태(captureImage() 함수)를 얻을 수 있으며 특별히 Image형태로 캡쳐한 것은 서버로 전송하기 위해 Base64로 변환할 수 있도록 encodeImageAsBase64()함수를 지원한다.

이제부터 화면 캡쳐 쉽게 하자.

활용하는 방법에 대해서는

http://blog.flexexamples.com/2007/12/08 ··· lex-3%2F

를 참고하도록 한다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/301)

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/08/setting-a-default-encoder-for-the-imagesnapshot-class-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.graphics.ImageSnapshot;
            import mx.graphics.codec.*;

            private function init():void {
                ImageSnapshot.defaultEncoder = PNGEncoder;
            }

            private function captureImg():void {
                var ohSnap:ImageSnapshot = ImageSnapshot.captureImage(img);
                textArea.text = ImageSnapshot.encodeImageAsBase64(ohSnap);
                lbl.text = ohSnap.contentType;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Capture Image"
                click="captureImg();" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="source:">
            <mx:Image id="img"
                    source="@Embed('images/flex_logo.jpg')" />
        </mx:FormItem>
        <mx:FormItem label="Base64:">
            <mx:TextArea id="textArea"
                    editable="false"
                    width="320"
                    height="160" />
        </mx:FormItem>
        <mx:FormItem label="contentType:">
            <mx:Label id="lbl" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>