使用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.改进这个例子,把拍照的图片保存在服务器中,或者提示用户下载

Flex4代码

<?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>
Java代码(struts2框架):
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();得到数据

不过保存的图片还有些瑕疵,图片会多出来一片空白,不过总算是保存成功了,先庆祝一下吧,以后再慢慢研究:)

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...