Как сделать скриншоты из Flex Spark VideoDisplay? - PullRequest
Новая
       25

Как сделать скриншоты из Flex Spark VideoDisplay?

1 голос
/ 02 марта 2010

Я хочу создать компонент, в котором пользователь может воспроизводить видео в Flex Spark VideoDisplay. Там будет кнопка, и всякий раз, когда она нажата, я хочу сохранить текущее время VideoDisplay плюс скриншот. Снимок экрана должен быть каким-то образом сохранен, потому что я хочу отображать все время и снимки экрана в DataGrid (снимки экрана должны появляться, когда пользователь наводит время в DataGrid).

Итак, как мне сделать снимки экрана Spark VideoDisplay и сохранить / отобразить их?

Ответы [ 2 ]

3 голосов
/ 02 марта 2010

Вы можете делать снимки несколькими способами, в этом случае просто используется класс ImageSnapshot, но вы можете сделать это вручную, нарисовав растровое изображение видеоизображения, если хотите. Вот образец:

Renderer 

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="100" height="100" creationComplete="trace(data)">

    <mx:Image source="{this.data}" width="100%" height="100%"/>

</s:ItemRenderer>

Пример приложения 

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

            import mx.graphics.ImageSnapshot;

            public function takeSnapshot():void
            {
                var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
                var bitmap:Bitmap = new Bitmap(snapshot);
                list.dataProvider.addItem(bitmap);
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>

    <s:VideoDisplay id="videoDisplay"
        source="video.mov"
        width="400" height="300"/>

    <s:Button id="button" click="takeSnapshot()"/>

    <s:List id="list" horizontalCenter="0" width="100%" itemRenderer="SnapshotRenderer">
        <s:dataProvider>
            <mx:ArrayList/>
        </s:dataProvider>
        <s:layout>
            <s:TileLayout/>
        </s:layout>
    </s:List>
</s:Application>

Чтобы выполнить в точности то, что вы описывали (сделать снимок и сохранить снимок), вы можете сохранить их в массиве с помощью этого метода takeSnapshot, или вы можете выполнить цикл по list.dataProvider, чтобы получить растровые изображения. Тогда вам просто нужно передать их на бэкэнд-язык (ruby, python, php ...) для сохранения.

Надеюсь, это поможет, Lance

1 голос
/ 20 октября 2010

используйте JPEGEncoder в flex, чтобы преобразовать его в bytearray, а затем закодировать байтовый массив с помощью b64encoder следующим образом: 

var jpg:JPEGEncoder = new JPEGEncoder();
var ba:ByteArray = jpg.encode(bitmapData);        

var b64encoder:Base64Encoder = new Base64Encoder();
b64encoder.encodeBytes(ba);
var b64String:String = b64encoder.flush();

Теперь вы можете передать вашу b64String на ваш сервер через HTTP post метод:)

...