使用jquery-webcam插件,实现人脸采集并转base64
项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base64码传入到后台进行后续操作。该demo适用于chrome和ie10以上,ie10以下版本的未测试。
前期插件准备
测试页面
测试前注意事项:
- 测试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的更多相关文章
- [转]使用jquery-webcam插件,实现人脸采集并转base64
项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base64码传入到后台进行后续操作.该demo适用于 ...
- 10个最好的 jQuery 视频插件(转)
在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...
- 10个最好的 jQuery 视频插件
在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个jQuery插 ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- jQuery Webcam Plugin jscam.swf文件反编译工具使用说明
jQuery webcam plugin是一个在ie,firefox,chrome下都可以用的摄像头摄像及拍照用的插件. (http://www.xarg.org/project/jquery-web ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
随机推荐
- MailKit和MimeKit 收发邮件
新建项目,引用MailKit和MimeKit NuGet包 using CommonTool.MailKit; using System; using System.Collections.Gener ...
- Python面向对象之数据封装的应用及配置文件
面向对象封装的应用 1.配置文件 1.1 ini配置文件 ini 文件是Initialzation File的缩写,平时用于存储软件的配置文件.例如:MySQL数据库的配置文件(my.ini) [my ...
- js数组用法
去面试的时候问到我一个问题,你能说出来多少种数组的方法跟用法,我当时只说出来十一个,回来以后才想起来还有很多种,现在整理一下,没有排名,想起那个写那个 1:forEach 从头遍历数组,没有返回值,有 ...
- 论文翻译:2020_DCCRN: Deep Complex Convolution Recurrent Network for Phase-Aware Speech Enhancement
论文地址:DCCRN:用于相位感知语音增强的深度复杂卷积循环网络 论文代码:https://paperswithcode.com/paper/dccrn-deep-complex-convolutio ...
- git常用命令及问题
Git基本操作 git init 创建新的git仓库 git clone [url] 使用 git clone 拷贝一个 Git 仓库到本地 git status 查看工作区 git stash li ...
- gitee中项目到运行操作,包括:打包、热部署、数据库操作
使用的工具:window10.IDEA 2018.2.3 .navicat110_premium.Git-2.23 1.idea导入gitee代码 复制项目地址 选择git工具 粘贴地址,点击clon ...
- 'javac' 不是内部或外部命令,也不是可运行的程序或批处理文件
记录在配置环境变量中被 Path 环境坑的一次前提:保证自己电脑中jdk环境配置都没有问题,即JAVA_HOME.Path.CLASSPATH均配置成功. 在这里我就不操作如何配置环境变量了,百度上面 ...
- LOJ6485题解
应该是经典题之一了. \[[n|k]=\frac 1 n\sum_{i=0}^{n-1}w_n^{ik} \] 有这个就可以算了. \[\sum_{i=0}^n\binom n i x^ia_{i \ ...
- 分布式 PostgreSQL 集群(Citus)官方示例 - 时间序列数据
在时间序列工作负载中,应用程序(例如一些实时应用程序查询最近的信息,同时归档旧信息. https://docs.citusdata.com/en/v10.2/sharding/data_modelin ...
- m3u8文件合并处理
m3u8文件合并处理 简介 M3U8 是 Unicode 版本的 M3U,用 UTF-8 编码."M3U" 和 "M3U8" 文件都是苹果公司使用的 HTTP ...