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方法将这些存储在数组中，或者您可以遍历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传递给服务器：）

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

2 个答案: