使用Flex4开启用户的摄像头,并且拍照保存

基于Flex与Flash的在线摄像头拍照系统 本文还有配套的精品资源,点击获取 简介:本项目利用Adobe Flex技术开发了一个在线拍照系统,该系统通过Web摄像头让用户能够在浏览器中拍照,并处理图像像素数据进行网络传输。系统使用Flash的Camera类调用摄像头,并利用BitmapData类处理像素信息,支持图像的实时预览及像素级别的处理,如亮度、对比度调整和裁剪。系统架构设计允许像素数据以字符串形式发送到服务器... 阅读详情
<?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();得到数据

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


Flex Web应用调用摄像头并实现拍照保存功能 对于需要严格遵循SOA规范的企业系统,SOAP-based Web Service仍是重要选项。Flex可通过WSDL导入生成代理类,实现标准化接口调用。 阅读详情

相关推荐

flex web 调用摄像头保持图片

NULL 博文链接:https://mojianpo.iteye.com/blog/919158

flex调用摄像头功能

http://ns.adobe.com/mxml/2009"       xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library://ns.adobe.com/flex/mx"       width="500" height="350" creationComplete="application1_creati

bao4545的专栏 621

flex4 摄像头调用实例

flex4 摄像头调用实例 很有参考价值

FlexBuilder4.6创建手机项目之调用手机摄像头

FlexBuilder4.6创建手机项目之调用摄像头 因为最后要将项目导出到手机上,所以与直接创建flex项目调用摄像头是有所区别的,在新版的API(SuperFlex)中有的标注手机项目未优化,所以在使用标签时应注意。 调用摄像头会使用camera类和video类相互绑定的方法或者使用cameraUI类。关于camera和cameraUI的用法大家可以查看AS3.0或者API。这里有一篇博客

u012359745的专栏 3028

Arduino应用——PWM控制直流电机风扇

Arduino应用——PWM控制直流电机风扇PWM原理实验器件功能描述如何改变文本的样式插入链接与图片实现代码生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 最近在使用arduino UNO开发板完成课程小作业。其中一个要求设计一个电风扇控制系统,要求能够通过PWM调节风扇的转速。期间搜索了许多例程和方法,但受限于器件,效果不

hypecycle的博客 2万+

UE5.5 PCGFrameWork程序化内容生成实战指南

本文是UE5.5 PCGFrameWork程序化内容生成的实战指南。详细介绍了从点云采样、DynamicMesh几何生成到子图与蓝图扩展的核心工作流。通过实战案例演示如何利用该框架高效构建丰富的程序化场景,为技术美术、独立开发者及爱好者提供从入门到进阶的系统性指引。

tea88的博客 921

Flex在线拍照功能

<br />功能:在线拍照<br />简介:用flex与java结合实现在线拍照<br />需求:为了满足希望通过摄像头拍照的图片,然后通过服务器来展示需要<br /><br /><br />实现代码:<br />flex:<?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="388" height="222"

fangfang200805的专栏 686

【论文复现】自动化细胞核分割与特征分析

HoVer-Net是一种精心设计的多分支深度学习网络架构,专为处理复杂的多组织显微图像中的细胞核实例分割与精确分类任务而开发。该网络通过创新的策略,不仅有效解决了细胞核在密集聚集区域难以准确区分的问题,还实现了对每个独立细胞核类型的细致分类。此外,HoVer-Net还引入了专门的上采样分支,这一设计旨在对每个成功分割出的细胞核实例进行进一步的核类型分类。这一分支利用高级语义信息,结合精心设计的分类策略,能够准确判断每个细胞核的所属类型,为医学研究提供了宝贵的细胞水平信息。

2201_75366661的博客 1980

Flex4 调用摄像头拍照

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

chengyu0485的博客 155

告别Keil?在Mac上配置STM32CubeIDE + CMSIS-DAP调试器全攻略(含常见报错解决)

本文详细介绍了在Mac平台上配置STM32CubeIDE与CMSIS-DAP调试器的全流程,包括硬件准备、软件安装、工程创建及调试优化。通过实战指南,帮助开发者高效完成STM32开发,解决常见报错问题,提升开发效率。

weixin_30485379的博客 433

在mac OS下安装SQL Developer

最近一直在折腾Oracle数据库,但由于电脑是mac系统,plsql developer用不了,远程管理一直不是很方便。后来听说Navicat不错,就也装了个试试看,发现界面看起来确实不错。今天心血来潮,想试试oracle自己开发的client。用惯plsql developer的人也可以来试试看,毕竟是自己人开发的,兼容性应该会不错吧。下面就把安装过程分享给新手或者需要帮助的朋友。 1.

bonbonboo的专栏 2万+

flex 4 摄像头拍照

flex 4 摄像头拍照: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="

新新 3964

C# ScottPlot 5.0 WinForms 十字光标示例:轻松实现动态数值显示,你学会了吗?

ScottPlot是一个免费、开源的.NET交互式绘图库,能够轻松地实现大型数据集的交互式显示。它支持多种图表类型,如折线图、柱状图、饼图、散点图等。ScottPlot的性能非常出色,即使是处理千万级别的数据也游刃有余。

java专栏 2219

java flex 在线拍照_flex摄像头拍照 java上传到数据库

前两天看了一个flex摄像头拍照的程序感觉不错不过是C#代码的,有点遗憾,今天给他改成了java代码的。Alert{font-size:12px;}fault="__onSavePictureFault(event)" result="__onSavePictureResult(event)"/>java 代码:public void processRequest(HttpServletRe...

weixin_39879651的博客 98

精度与速度双突破:YOLOv8-Pose 在 RK3588 上实现高性能人体姿态分析部署

本教程从YOLOv8-pose模型的姿态识别训练,到RK3588的边缘量化部署,为你打造了一套“高精度+高实时性+低成本”的人体姿态分析解决方案。无论是健身动作纠正、智能安防行为检测,还是工业人员姿态监控,这套技术都能直接复用——你只需替换数据集与业务逻辑,即可快速落地专属的边缘AI姿态识别系统。如果你在实践中遇到任何卡点,欢迎随时交流。记住,人体姿态识别的价值在于“关键点准、推理快、部署易”,而这三者的平衡,正是你通过本教程能掌握的核心能力。

know_F0727的博客 435

家里摄像头录像存 NAS,空间爆满了怎么办?一招实现设定容量自动清理实现循环存储!

📷 家用摄像头录像久了会撑爆 NAS 吗?别担心,这篇文章教如何实现自动清理录像,释放 NAS 空间,避免爆盘🧹

XiaoqiangClub的博客 1882

flex图片截取保存本地

<br /><?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="388" height="222" creationComplete="initApp()"> <mx:Style> Alert{font-size:12px;} </mx:Style> <mx:S

Mrzhangpan专栏 1676

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

flex捕获摄像头拍照

<br />flex:<br />XML code<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="388" height="222" creationComplete="initApp()"><mx:Style> Alert{font-size:12px;} </mx:Style><m

704

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

Flex 捕获摄像头拍照

Flex完整代码:程序代码http://www.adobe.com/2006/mxml" layout="absolute" width="388" height="222" creationComplete="initApp()">              Alert{font-size:12px;}                               

anfeind的专栏 6749

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

java flex 在线拍照_Flex在线拍照功能(附源码)

Alert{font-size:12px;}importmx.rpc.events.FaultEvent;importmx.rpc.events.ResultEvent;importmx.controls.Alert;importmx.core.Application;privatestaticconstDEFAULT_CAMERA_WIDTH:Number=160;//摄像头...

weixin_39810441的博客 460
上一篇: flex4 自定义右键菜单
下一篇: mx:TabNavigator 与s:TextInput一起使用的Bug
wpz0713
博客等级 码龄12年 19粉丝 26原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值