使用Webcam实现拍照功能

开发环境：Grails 3.2.3，jQuery 1.11.3

最近做项目，遇到一个正常但又少见的需求——拍照，于是在Google上搜索“js 拍照”，出现的都是Html5的实现，又搜索“jquery 拍照”，搜出了jQuery的拍照插件。

先看了下《基于html5实现的超酷摄像头（html5-webcam）拍照功能-photobooth-js》，结果发现我的浏览器不支持，连Demo都没运行起来，放弃。

于是选择jQuery Webcam插件，参照 jQuery webcam 示例，实现了拍照功能，但是发现每次打开浏览器，都会出现“是否允许使用摄像头”的选择框，好烦，而且js的代码太繁琐。

又拜托Google大哥，直接搜索“webcam” ，找到了 webcamjs，Demo在我的浏览器中运行正常，js的代码也非常简单。

如下是根据文档，实现的拍照、预览、上传的代码：

 <script src="webcam.js"></script>
<div id="my_camera"></div>
<img src="" id="img"><script language="JavaScript">//设置镜头的大小Webcam.set({width: 320,height: 240,image_format: 'jpeg',jpeg_quality: 90}); Webcam.attach( '#my_camera' );function take_snapshot() {Webcam.snap( function(data_uri) {$("#img").attr("src", data_uri);} );}function upload() {Webcam.upload( $("#img").attr("src"), javaurl, function(code, text) {//文件上传成功后，要执行的内容                            });｝
</script><a href="javascript:void(take_snapshot())">拍照</a>
<a href="javascript:void(upload())”>上传</a>

Groovy中保存图片代码如下：

   def image=request.getFile('webcam')byte[] b = image .bytesString fileName = new Date().format("yyyyMMddHHmmss") + ".jpg"//保存图片OutputStream out = new FileOutputStream(fileName)out.write bout.flush()out.close()

是不是超级简单？关键是网页中设置Flash时，选择“记住”，以后就不用次次设置了。

文中使用的webcam.js，可在https://github.com/jhuckaby/w... 上下载。

使用Webcam实现拍照功能相关推荐

基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js
在线演示下载 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件 ...
java js 打开摄像头_基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js...
日期:2012-12-10 来源:GBin1.com WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以 ...
使用Webcam完成拍照功能
结构比较简单,只需要三个包.自行百度代码: package com.company;import com.github.sarxos.webcam.Webcam; import com.github ...
Javascript+PHP实现在线拍照功能（转）
Javascript+PHP实现在线拍照功能我们在一些WEB应用中可能会遇到这样的情况,用户需要自己现场拍照并上传到会员系统.比如驾校采集指纹拍照流程.考试现场采集照片等.我们今天要讲的是如何使用j ...
php在线拍照代码,Javascript+PHP实现在线拍照功能
实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash. HTML Javascript+PHP实现在线拍照功能在body中加入一个用于调用摄像组件的容器id#ca ...
14.3.1 调用系统的拍照功能
14.3.1 调用系统的拍照功能 http://book.51cto.com 2010-06-22 14:19 李宁中国水利水电出版社我要评论(0) 摘要:<Android/OPho ...
html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...
华为如何拍火烧云_华为手机拍照功能介绍-设置通用功能
相比起OPPO手机之类的拍照手机,华为手机的拍照功能很多,对于懂得使用的人来说这些功能可以让他们拍出好照片,然而对于那些不会使用这些功能的人来说,拍出来的照片还不如OPPO之类的拍照手机拍出来的好看. ...
C#摄像头实现拍照功能的简单代码示例
C#摄像头实现拍照功能的简单代码示例 2009-11-20 来自:网上整理字体大小:[大中小] ·摘要:这里将介绍一个C#摄像头实现拍照功能的简单代码示例,代码虽然不短,但是基本上实现了相对应的功能 ...

使用Webcam实现拍照功能

使用Webcam实现拍照功能相关推荐

最新文章

热门文章