使用Webcam实现拍照功能

开发环境：Grails 3.2.3，jQuery 1.11.3

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

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

<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时，选择“记住”，以后就不用次次设置了。