flex

摘要: 使用Flex4开启用户的摄像头，并且拍照保存

1.先来做一个最简单的例子，开启摄像头，并且拍照显示在Image组件中

<?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" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" height="658">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;

import mx.events.FlexEvent;
import mx.graphics.codec.JPEGEncoder;

private var cam:Camera;

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
cam = Camera.getCamera();
var video:Video = new Video();
video.attachCamera(cam);

vd.addChild(video);
}

protected function button1_clickHandler(event:MouseEvent):void
{
var bitmapData:BitmapData = new BitmapData(vd.width,vd.height);
bitmapData.draw(vd);

var jpeg:JPEGEncoder = new JPEGEncoder(100);
var byteArray:ByteArray = jpeg.encode(bitmapData);
img.source = byteArray;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:VideoDisplay id="vd" x="128" y="6" width="385" height="300"/>
<s:Button x="33" y="111" label="保存" click="button1_clickHandler(event)"/>
<mx:Image id="img" x="127" y="320" width="385" height="300"/>
</s:Application>

**
**
**粗体

****首先开启用户的摄像头，在VideoDisplay组件中显示，然后把VideoDisplay中的图像保存为BitmapData，最后转换为ByteArray类型的数据显示在Image组件中

Flex4开启用户摄像头的代码跟Flex3稍有差别，Flex3可以通过vd.attachCamera(cam);开启摄像头

2.改进这个例子，把拍照的图片保存在服务器中，或者提示用户下载**

<?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" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" height="658">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;

import mx.events.FlexEvent;
import mx.graphics.codec.JPEGEncoder;

private var cam:Camera;

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
cam = Camera.getCamera();
var video:Video = new Video();
video.attachCamera(cam);

vd.addChild(video);
}

protected function button1_clickHandler(event:MouseEvent):void
{
var bitmapData:BitmapData = new BitmapData(vd.width,vd.height);
bitmapData.draw(vd);

var jpeg:JPEGEncoder = new JPEGEncoder(100);
var byteArray:ByteArray = jpeg.encode(bitmapData);

var urlrequest:URLRequest = new URLRequest("http://localhost:8080/demo/FlexTest1.action");
urlrequest.contentType = 'applicatoin/octet-stream';
urlrequest.method = URLRequestMethod.POST;
urlrequest.data = byteArray;
navigateToURL(urlrequest);

img.source = byteArray;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:VideoDisplay id="vd" x="128" y="6" width="385" height="300"/>
<s:Button x="33" y="111" label="保存" click="button1_clickHandler(event)"/>
<mx:Image id="img" x="127" y="320" width="385" height="300"/>
</s:Application>

package com.ruiri.setup.web.action;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.InputStream;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class FlexTest1Action extends ActionSupport {

private InputStream inputStream;
private String contentType;
private String filename;

@Override
public String execute() throws Exception {
filename = "pic.jpg";
contentType = "application/octet-stream";
HttpServletRequest request =  ServletActionContext.getRequest();
inputStream = request.getInputStream();

// 保存图片
BufferedImage bufferedImage = ImageIO.read(request.getInputStream());
ImageIO.write(bufferedImage, "jpeg", new File("d:\\pic.jpg"));

return "file";
}

public InputStream getInputStream() {
return inputStream;
}

public void setInputStream(InputStream inputStream) {
this.inputStream = inputStream;
}

public String getContentType() {
return contentType;
}

public void setContentType(String contentType) {
this.contentType = contentType;
}

public String getFilename() {
return filename;
}
}

**Java中配置文件struts.xml：

这里是列表文本**

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" namespace="/" extends="struts-default">
<global-results>
<result name="file" type="stream">
<param name="contentType">
${contentType}
</param>
<param name="inputName">inputStream</param>
<param name="contentDisposition">
attachment;filename="${filename}"
</param>
<param name="bufferSize">1024</param>
</result>
</global-results>

</package>
</struts>

**Flex中ByteArray数据传到Java中，真是颇费周折，网上查了很多方法，自己也尝试多种方法，说的最多的是在Java中通过byte[]可以获取到，我没有试成功。

最后通过urlrequest.data = byteArray;直接把byteArray传递过去，在java里面通过request.getInputStream();得到数据
**