项目需求：在ie或chrome浏览器下，调用电脑摄像头（确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机），进行人脸图像采集预览，并将图片的base64码传入到后台进行后续操作。该demo适用于chrome和ie10以上，ie10以下版本的未测试。

前期插件准备

  • jquery：1.5版本以上即可
  • jquery-webcam：github地址, 作者主页地址这里。该插件下载好后我们需要如下四个文件并与下面测试的HTML放在同一目录下：

测试页面

测试前注意事项:

  • 测试html文件必须使用http请求方式打开，不可以通过本地file://请求直接打开，会报错：webcam.capture is not a function
  • 在进行chrome和ie同时调试，或者打开多个页面调试的时候，务必关闭前一页面，解除前页面对摄像头的占用，否则后一页面调用摄像头后会显示黑屏或白屏

  • 因为console.log打印的日志长度是有限制的，所以直接通过console.log打印的base64码是不完整的，因此将该base64码复制到浏览器地址栏打开进行图像预览的时会无法显示图片。
    解决办法：我们可以将完整的base64码直接设置给预览img的src，然后通过开发者工具F12取得的base64码便是完整的

    `base64image.setAttribute('src', base64);`

html代码：
以下代码是基于原作者的demo页进行的部分修改，并使用了两种预览模式（canvas和img），根据需求选择使用

<!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>

使用jquery-webcam插件，实现人脸采集并转base64的更多相关文章

  1. [转]使用jquery-webcam插件，实现人脸采集并转base64

    项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base64码传入到后台进行后续操作.该demo适用于 ...

  2. 10个最好的 jQuery 视频插件(转)

    在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...

  3. 10个最好的 jQuery 视频插件

    在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个jQuery插 ...

  4. 《JQuery常用插件教程》系列分享专栏

    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...

  5. jQuery Webcam Plugin jscam.swf文件反编译工具使用说明

    jQuery webcam plugin是一个在ie,firefox,chrome下都可以用的摄像头摄像及拍照用的插件. (http://www.xarg.org/project/jquery-web ...

  6. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  7. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  8. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  9. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

随机推荐

  1. WIN10:IE浏览器的默认主页以及通过链接搜索的默认引擎

    主页设置: 地址栏搜索引擎:

  2. @Async的用法和示例

    @Async 注解的用法和示例 目录 @Async 注解的用法和示例 背景 异步调用 @Async介绍 在Spring中启用@Async 示例一:基本使用方式 示例二:在同一个类中调用异步方法 示例三 ...

  3. XML序列化与反序列化接口对接实战，看这篇就够了

    关键字:c# .NET XML 序列化 反序列化 本文为接口对接实践经验分享,不对具体的XML概念定义进行阐述:涉及工具类及处理方法已在生产环境使用多年,可放心使用.当然如果你发现问题,或有不同想法, ...

  4. 民间流转的pytest项目结构设计

    创建上图的pytest项目结构,只需要一条命令即可: tep startproject demo 前提是安装tep0.9.8版本: pip install tep==0.9.8 示例代码单独放在了sa ...

  5. MAT工具分析Dump文件（大对象定位）

    前段时间线上服务经常发生卡顿,经过排查发现是大对象引起的Fullgc问题,特此记录排查逻辑. 目录 目的 一.获得服务进程 二.生成dump文件 三.下载mat工具 四.使用mat工具导入第二步生成的 ...

  6. MATLAB菜鸟入门笔记【函数章】

    一.用捷径表达式赋值 1.first:incr:last   first代表数组的每一个值,incr代表步增量,last代表这个数组的最后一个值. Ep:>>x=1:2:10        ...

  7. tp6微信公众号开发者模式token认证

      微信公众号开发完整教程(一) PHP7.0版本,TP5.0框架 技术标签: 微信公众号开发         因为工作的需要,这一两年对微信公众号和小程序,项目制作的比较多.所以我才打算写一篇全面的 ...

  8. ASP.NET Core 6框架揭秘实例演示[21]：如何承载你的后台服务

    借助 .NET提供的服务承载(Hosting)系统,我们可以将一个或者多个长时间运行的后台服务寄宿或者承载我们创建的应用中.任何需要在后台长时间运行的操作都可以定义成标准化的服务并利用该系统来承载,A ...

  9. mysql卡顿问题查找和解决方法

    mysql卡顿问题查找和解决方法 版权一.所遇问题        写在前边的废话:今天面试阿里的时候问到过类似问题,以前做调优的时候都是现查现用,缺乏总结,面试时答得也不好,今天趁此机会做一个梳理,知 ...

  10. LGP4714题解

    没意思啊 题意:求 \(1^{k+2}(n)\),其中规定 \(1^k\) 在 \(k=1\) 时为 \(1\),在 \(2 \leq k\) 时为 \(1 * 1^{k-1}\)(* 为狄利克雷卷积 ...