开发环境: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 .bytes
String fileName = new Date().format("yyyyMMddHHmmss") + ".jpg"
//保存图片
OutputStream out = new FileOutputStream(fileName)
out.write b
out.flush()
out.close()
是不是超级简单?关键是网页中设置Flash时,选择“记住”,以后就不用次次设置了。
文中使用的webcam.js,可在https://github.com/jhuckaby/w... 上下载。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。