使用jquery-webcam插件，實現人臉採集並轉base64

時間 2019-11-08

標籤使用 jquery webcam 插件實現採集並轉 base64 base 欄目 JQuery 简体版

原文原文鏈接

項目需求：在ie或chrome瀏覽器下，調用電腦攝像頭（確保使用的是筆記本電腦，或者攝像頭功能正常使用的臺式機），進行人臉圖像採集預覽，並將圖片的base64碼傳入到後臺進行後續操做。該demo適用於chrome和ie10以上，ie10如下版本的未測試。javascript

前期插件準備

jquery：1.5版本以上便可
jquery-webcam：github地址, 做者主頁地址這裏。該插件下載好後咱們須要以下四個文件並與下面測試的HTML放在同一目錄下：

測試頁面

測試前注意事項:css

測試html文件必須使用http請求方式打開，不能夠經過本地file://請求直接打開，會報錯：webcam.capture is not a function
在進行chrome和ie同時調試，或者打開多個頁面調試的時候，務必關閉前一頁面，解除前頁面對攝像頭的佔用，不然後一頁面調用攝像頭後會顯示黑屏或白屏
由於console.log打印的日誌長度是有限制的，因此直接經過console.log打印的base64碼是不完整的，所以將該base64碼複製到瀏覽器地址欄打開進行圖像預覽的時會沒法顯示圖片。
解決辦法：咱們能夠將完整的base64碼直接設置給預覽img的src，而後經過開發者工具F12取得的base64碼即是完整的html
```
`base64image.setAttribute('src', base64);`
```

html代碼：
如下代碼是基於原做者的demo頁進行的部分修改，並使用了兩種預覽模式（canvas和img），根據需求選擇使用java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>webcam</title>
        <style type="text/css">
            #webcam {
                width: auto;
                height: auto;
                float: left;
            }
            #base64image {
                display: block;
                width: 320px;
                height: 240px;
            }
        </style>

        <!-- 基本的jquery引用，1.5版本以上 -->
        <script src="jquery-1.8.3.min.js"></script>

        <!-- webcam插件引用 -->
        <script src="jquery.webcam.js"></script>

    </head>

    <body>

        <div id="webcam"></div>
        <canvas id="canvas" width="320" height="240"></canvas>
        <input id="snapBtn" type="button" value="拍照" />
        <img id="base64image" src='' />

        <script type="text/javascript">
            var pos = 0,
                ctx = null,
                image = [];
            var w = 320;
            var h = 240;
            $(document).ready(function() {

                jQuery("#webcam").webcam({

                    width: 320,
                    height: 240,
                    mode: "callback",
                    swffile: "jscam_canvas_only.swf", // 這裏引入swf文件，注意路徑
                    onTick: function(remain) {},
                    onSave: function(data) {

                        var col = data.split(";");
                        var img = image;

                        for(var i = 0; i < 320; i++) {
                            var tmp = parseInt(col[i]);
                            img.data[pos + 0] = (tmp >> 16) & 0xff;
                            img.data[pos + 1] = (tmp >> 8) & 0xff;
                            img.data[pos + 2] = tmp & 0xff;
                            img.data[pos + 3] = 0xff;
                            pos += 4;
                        }

                        if(pos >= 4 * 320 * 240) {
                        
                            // 將圖片顯示到canvas中
                            ctx.putImageData(img, 0, 0);
                            
                            // 取得圖片的base64碼
                            var base64 = canvas.toDataURL("image/png");                    

                            // 將圖片base64碼設置給img
                            var base64image = document.getElementById('base64image');                                                              
                            base64image.setAttribute('src', base64);

                            pos = 0;

                        }

                    },

                    onCapture: function() {
                        webcam.save();
                        // Show a flash for example
                    },

                    debug: function(type, string) {
                        console.log('type:' + type + ',string:' + string);
                        // Write debug information to console.log() or a div
                    },

                    onLoad: function() {
                        // Page load
                    }

                });
                window.addEventListener("load", function() {

                    var canvas = document.getElementById("canvas");

                    if(canvas.getContext) {
                        ctx = canvas.getContext("2d");
                        ctx.clearRect(0, 0, 320, 240);

                        var img = new Image();
                        img.onload = function() {
                            ctx.drawImage(img, 129, 89);
                        }
                        image = ctx.getImageData(0, 0, 320, 240);
                    }

                }, false);

                $('#snapBtn').on('click', function() {
                    webcam.capture();
                });
            });
        </script>
    </body>

</html>