项目需求:在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引用,.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="" height=""></canvas>
<input id="snapBtn" type="button" value="拍照" />
<img id="base64image" src='' /> <script type="text/javascript">
var pos = ,
ctx = null,
image = [];
var w = ;
var h = ;
$(document).ready(function() { jQuery("#webcam").webcam({ width: ,
height: ,
mode: "callback",
swffile: "jscam_canvas_only.swf", // 这里引入swf文件,注意路径
onTick: function(remain) {},
onSave: function(data) { var col = data.split(";");
var img = image; for(var i = ; i < ; i++) {
var tmp = parseInt(col[i]);
img.data[pos + ] = (tmp >> ) & 0xff;
img.data[pos + ] = (tmp >> ) & 0xff;
img.data[pos + ] = tmp & 0xff;
img.data[pos + ] = 0xff;
pos += ;
} if(pos >= * * ) { // 将图片显示到canvas中
ctx.putImageData(img, , ); // 取得图片的base64码
var base64 = canvas.toDataURL("image/png"); // 将图片base64码设置给img
var base64image = document.getElementById('base64image');
base64image.setAttribute('src', base64); pos = ; } }, 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(, , , ); var img = new Image();
img.onload = function() {
ctx.drawImage(img, , );
}
image = ctx.getImageData(, , , );
} }, 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. Go -- 调用dll库

    package main import ( "syscall" "unsafe" ) func main(){ h, err := syscall.LoadLi ...

  2. osglightpoint例子 [转]

    该例子演示了光点的效果,主要应用osgSim库中的LightPoint.LightPointNode. SequenceGroup.BlinkSequence,osgSim库属于仿真库,扩展库.应用o ...

  3. js定义对象并赋值

    1.可以通过  var ratio = {}; ratio.low = 70; ratio.high = 90; ratio.scale = 0.2; 2.可以通过 var obj = new Obj ...

  4. magento 自定义订单前缀或订单起始编号

    在magento里订单的起始号是从1000000001开始的,但有时你可能需要自定义该值的起始号如从20000000000开始 在Google上搜索了一番找到以下代码并完美解决问题,以此记录希望帮助其 ...

  5. C# 实现对微博短网址的重定向还原

    新浪微博中,为了节省输入字数,通过短网址对发布微博中链接进行重定向.我们可以通过代码实现对短网址进行还原,代码如下: private string GetOrignalLink(string link ...

  6. xcode 5 使用 XCTest 做单元测试

    xcode 5 使用 XCTest 做单元测试 什么是单元测试,请看 百度百科 单元测试 一:在xcode5 之前,我们新建项目时,可以选择是否集成单元测试:如今在xcode5,我们新建立的项目默认就 ...

  7. RootMotionComputer 根运动计算机

    using UnityEngine; using System.Collections; /* * -------------------------------------------------- ...

  8. Linux 监测CPU常用的工具sar iostat vmstat top uptime

    sar -u 1 2 iostat -c 1 2 vmstat 1 2 top uptime Linux监控CPU整体性能常用的工具有: # mpstat: mpstat 不但能查看所有CPU的平均信 ...

  9. 关于AWS的备份策略

    AWS有一个很强大的功能,就是snapshot,翻译过来就是对EBS进行快照.通俗的说,即是对整个硬盘进行完整的镜像备份.如此一来,在其中一台EC2挂掉的时候,我们迅速的另起一台EC2,并将通过快照恢 ...

  10. Android高效异步图片加载框架

    概述 Android高效异步图片加载框架:一个高效的异步加载显示的图片加载框架,同时具备图片压缩,缓存机制等特性. 详细 代码下载:http://www.demodashi.com/demo/1214 ...