js调起摄像头拍照,php存入的数据库
2020-12-07 本文已影响0人
风度翩翩的程序猿
简单来说就是,人脸采集的时候,相比大部分人来说高考,中考,成人高考,学校采集信息的时候,你要在电脑面前拍照。
html+js代码
<td valign="middle" class="text-center">
<video id="video"style="width:150px;height:200px; border:solid thin #EEE;" autoplay="autoplay"></video>
</td>
<td valign="middle" class="text-center">
<canvas id="canvas" width="640" height="480" hidden style="width:150px;height:200px; border:solid thin #EEE;"></canvas>
<img id="imgview" scr="" width="640" height="480" style="width:150px;height:200px; border:solid thin #EEE;">
</td>
<td rowspan="2" class="text-center" style="vertical-align:middle !important;">
<div id="qd" onclick="camera()" class="btn btn-primary btn-sm">
<i class="fa fa-camera" id="camera" aria-hidden="true"></i> 拍摄照片
</div>
<div id="cjzp" onclick="queren()" class="btn btn-success btn-sm">
<i class="fa fa-upload" aria-hidden="true"></i> 确认采集
</div>
</td>
<script>
let constraints = {
video: {
width: 480,
height: 640
},
// audio: true
};
//获得video摄像头区域
let video = document.getElementById("video");
// 这里介绍新的方法,返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
// 成功调用
promise.then(function (MediaStream) {
/* 使用这个MediaStream */
video.srcObject = MediaStream;
video.play();
// console.log(MediaStream); // 对象
});
// 失败调用
promise.catch(function (err) {
/* 处理error */
console.log(err); // 拒签
});
function camera(){
var number = $('#number').text();
if(number == ''){
alert('该人员不存在');
return ;
}
//获得Canvas对象
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
canvas.getContext('2d').drawImage(video, 0, 0, 640, 480);
let photo = canvas.toDataURL("image/jpeg");
$('#imgview').attr('src',photo)
}
function queren() {
var photo = $('#imgview').attr('src')
var number = $('#number').text();
if(number == ''){
alert('该人员不存在');
return ;
}
$.post('<?= site_url($folder . '/photograph/caiji')?>',{photo:photo,number:number},function (re) {
if(re == 1){
alert('采集成功');
}
});
}
</script>
上面的这些代码就是调起摄像头,并且拍照,拍照形成的类型是base64,需要后端处理
php代码
public function caiji(){
$post = $this->input->post();
// base64转url
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $post['photo'], $result)){
$type = $result[2];
$session_id = session_id();
$file_name = $session_id . '-' . time();
$targetFolder = $this->create_dir('img');
$targetFile = $file_name . '.' . $type;//文件全名
$targetThumbFile = $file_name . '_thumb' . '.' . $type;
$targetPath = $targetFolder . $targetFile;//文件路径
if (file_put_contents($targetPath, base64_decode(str_replace($result[1], '', $post['photo'])))){
// $targetPath 路径
// 修改照片
$this->db->update('faceos_user',array('face_info'=>$targetPath),array('number'=>$post['number']));
echo 1;
}else{
echo false;
}
}else{
return false;
}
}
//创建上传目录
public function create_dir($module = 'img')
{
$root_dir = ('./upload');
$module_dir = $root_dir . '/' . $module;
$year_dir = $module_dir . '/' . date('Y', time());
$month_dir = $year_dir . '/' . date('m', time());
$day_dir = $month_dir . '/' . date('d', time());
if (!is_dir($root_dir)) {
mkdir($root_dir);
}
if (!is_dir($module_dir)) {
mkdir($module_dir);
}
if (!is_dir($year_dir)) {
mkdir($year_dir);
}
if (!is_dir($month_dir)) {
mkdir($month_dir);
}
if (!is_dir($day_dir)) {
mkdir($day_dir);
}
return $day_dir . '/';
}
这些代码仅供参考,因为每个框架的代码都不一样,这个是CI3