使用Webcam實現拍照功能

DTeam發表於2017-02-07
Web

開發環境：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… 上下載。

相關文章