在IE11下通过webcam+flash+java实现摄像头拍照

2022-08-11 17:29:34 +08:00
parent 70ab971831
commit 2694467518
1 changed files with 49 additions and 36 deletions
--- a/public/faceLoginIE/index.html
+++ b/public/faceLoginIE/index.html
@ -6,45 +6,58 @@
        <link href="cs.css" rel="stylesheet" type="text/css">
        <script src="jquery.js"></script>
        <script src="jquery.webcam.min.js"></script>
-        <script type="text/javascript">
-        $(document).ready(function(){
-            jQuery("#webcam").webcam({
-                width: 320,
-                height: 240,
-                mode: "callback",
-                swffile: "jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller
-                onTick: function(remain) {
-                    if (0 == remain) {
-                        jQuery("#status").text("Cheese!");
-                    } else {
-                        jQuery("#status").text(remain + " seconds remaining...");
-                    }
-                },
-                onSave: function(data) {
-                    var col = data.split(";");
-                    // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
-                },
-                onCapture: function () {
-                    webcam.save();
-                    // Show a flash for example
-                },
-                debug: function (type, string) {
-                    // Write debug information to console.log() or a div, ...
-                },
-                onLoad: function () {
-                    // Page load
-                    var cams = webcam.getCameraList();
-                    for(var i in cams) {
-                        jQuery("#cams").append("<li>" + cams[i] + "</li>");
-                    }
-                }
-            });
-        });
-
-        </script>
    </head>
    <body>
        <div id="webcam"></div>
+        <input id="snapBtn" type="button" value="拍照" />
+        <img id="base64image" src='' />
+        <script type="text/javascript">
+            var image = new Array();
+            var pos = 0;
+            var w = 320;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应
+            var h = 240;
+            $(document).ready(function() {
+                $("#webcam").webcam({
+                    width: w,
+                    height: h,
+                    mode: "callback",
+                    swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径
+                    onTick: function(remain) {},
+                    onSave: function(data) {
+                        image.push(data);
+                        pos += 4 * 320;
+                        //post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
+                        if (pos >= 4 * 320 * 240) {
+                            var url ='http://127.0.0.1:8081/outer/v1.0/stock/logicStock/rgbArray2Base64';
+                            $.post(url, {type: 'pixel', rgb: image.join('|')}, function(result){
+                                $('#base64image').attr('src', 'data:image/jpg;base64,' + result.data);
+                            });
+                            image = new Array();
+                            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
+                    }
+
+                });
+
+                $('#snapBtn').on('click', function() {
+                    webcam.capture();
+                });
+            });
+        </script>
    </body>
 </html>