如何截取 Flex Spark VideoDisplay 的屏幕截图？

Question

我想构建一个组件，用户可以在其中在 Flex Spark VideoDisplay 中播放视频。会有一个按钮，每当按下该按钮时，我想保存 VideoDisplay 的当前时间以及屏幕截图。屏幕截图需要以某种方式保存，因为我想在 DataGrid 中显示所有时间和屏幕截图（当用户将鼠标悬停在 DataGrid 中的某个时间时，应该出现屏幕截图）。

那么，如何截取 Spark VideoDisplay 的屏幕截图并保存/显示它们？

Answer 1

您可以通过多种方式拍摄快照，这种方式仅使用 ImageSnapshot 类，但如果您愿意，您可以通过手动绘制视频显示的位图来完成。这是一个示例：

渲染器

<?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< 中的数组中/code> 方法，或者您可以循环遍历 list.dataProvider 来获取位图。然后您只需将它们传递给后端语言（ruby、python、php...）即可保存。

希望有帮助，
槊

Answer 2

使用flex中的JPEGEncoder将其转换为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();

现在您可以通过HTTP post方法将b64String传递到您的服务器:)