开辟环境：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… 上下载。